我正在尝试将内容拖放到我的contenteditable区域中。

<div contenteditable="true">
<p>some multiline paragraph
   paragraph</p>
<p>another multiline
   paragraph</p>
<div class="draggable">DRAGGABLE</div>
</div>


与上述结构相同且内容更多的HTML位于http://jsfiddle.net/BQg7L/1

我想要的是我应该能够将'.draggable'元素拖放到段落<p>标签中。这是细节。该放置应通过以下两种方式之一进行工作。


只需要在段落的各行之间删除可拖动对象,然后将其拖放时,应在放置时将段落分为两段。删除的元素应该在这两段之间。
或者,无论将其拖放到段落中的何处,都只能将其拖放到段落的末尾(即,在</p>结束标记之后)。


任何帮助表示赞赏。 jsfiddle只有一个问题,没有javascript代码,因为我没有任何想法。当我得到一些指示时,我将用js更新jsfiddle。

最佳答案

这是HTML代码:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div class="drop_area" contenteditable="true">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget luctus enim. Nunc varius bibendum accumsan. Donec pretium mi eget risus auctor, nec pulvinar libero blandit. Aenean feugiat dolor sit amet nisi sagittis mattis. Praesent lacus metus, aliquam vehicula enim eu, fringilla sollicitudin est.</p>
    <p>Cras ut turpis at diam auctor euismod. Maecenas in mauris erat. Maecenas sit amet tellus a augue dignissim fringilla. Proin auctor et quam sed tincidunt. Vivamus vehicula est id ligula lacinia, ac euismod dolor porta. </p>
    <p class="test_row" style="visibility: hidden"></p>
    <p class="new_row" style="visibility: hidden"></p>
    <!-- the below div should be draggable and can be dropped between lines in the above paragraphs. On drop, the paragraph should be split into two paragraphs and the div should be between these paragraphs -->
    <div class="draggable">DRAGGABLE</div>
</div>


和JS代码:

$(document).ready(function(){
    $.each($( ".drop_area p" ), function(){
        var rows = parseInt($(this).height())/parseInt($(this).css('line-height'));
        var arr_words = $(this).text().split(' ');
        $('.new_row').html('');
        $.each(arr_words, function(){
            $('.test_row').text($('.test_row').text() + ' ' + this);

            if(parseInt($('.test_row').height())>parseInt($(".drop_area p").css('line-height'))){

                $('.new_row').html($('.new_row').html() + '<span style="height: 1px; width: 100%;display: block"></span> ' + this);
               $('.test_row').text('')
            }
            else $('.new_row').html($('.new_row').html() + ' ' + this);
        })
        $(this).html($('.new_row').html())
    })
    $( ".draggable" ).draggable({
                appendTo: 'body',
                cursorAt: { top: 0, left: 30 },
                revert: 'invariant',
                helper: 'clone'
            });
        $( ".drop_area p span" ).droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept: ":not(.ui-sortable-helper)",
        over: function(event, ui) {
               $(this).css('height','10px');
         },
        out: function(event, ui) {
            $(this).css('height','1px');
        },
        drop: function( event, ui ) {
         $(this).replaceWith('</p><p>')


        }
    })
})


您还可以检查结果here

10-05 20:51
查看更多