在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

我想要的是能够将".dragable"元素拖放到段落<p>标记中。下面是细节。跌落应按以下任一方式工作。

1. draggable只需要在段落的行之间拖放，当拖放时，它应该在拖放时将段落拆分为两个段落。删除的元素应该在这两段之间
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>')

        }
    })
})

您也可以在此处检查结果