javascript - 在 contenteditable 中的行或段落之间拖放

Question

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

<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> 中标签。这是细节。掉落应通过以下任一方式进行。

1. 可拖动对象仅需要在段落行之间进行 DROPPED，并且在放置时，它应该在放置点将段落分成两个段落。并且删除的元素应该位于这两段之间。
2. 或者，无论将 Draggable 放置在段落内的哪个位置，都应仅将其放置在段落末尾(即结束 </p> 标记之后)。

感谢任何帮助。 jsfiddle 只有问题，没有 javascript 代码，因为我不知道从何开始。当我得到一些指示时，我将用 js 更新 jsfiddle。

Answer 1

这是 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