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

我正在尝试在我的contenteditable区域拖放内容

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

一些多行段落
段落

另一个多行
段落

拖拉的

与上述结构相同且内容更多的Html位于

我想要的是，我应该能够将“.draggable”元素拖放到段落

标记中。这里是细节。下降应按以下任一方式工作

可拖动的内容只需在段落的行之间删除，删除时，应在删除点将段落拆分为两个段落。删除的元素应该在这两段之间

或者，Dragable应该只在段落末尾（即，在结束标记之后）删除，无论它在段落中的何处删除

感谢您的帮助。JSFIDLE只有一个问题，没有javascript代码，因为我不知道如何开始。当我得到一些指导时，我将用js更新JSFIDLE。

以下是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>

Lorem ipsum dolor sit amet，是一位杰出的献身者。我是埃吉特·卢库斯·埃尼姆。比本杜姆葡萄园。不，我是一个拍卖人，nec pulvinar libero blandit。埃尼安·费吉亚特·多洛坐在阿梅特·尼西·萨吉提斯·马蒂斯身边。这是一个很好的例子，它是一个很好的例子

在钻石拍卖行euismod，你可以看到一头粗壮的turpis。Maecenas在mauris erat。梅塞纳坐在埃米特告诉我们一个奥古斯显贵弗林斯利亚。拍卖人和拍卖人。交通工具的寿命与拉齐尼亚舌苔的寿命相同



拖拉的

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>')


        }
    })
})

$（文档）.ready（函数（）{
$.each（$（“.drop\u area p”），函数（）{
var rows=parseInt（$（this.height（））/parseInt（$（this.css（$line-height））；
var arr_words=$（this.text（）.split（“”）；
$（'.new_row'）.html（''）；
$.each（arr_字，函数（）{
$（'.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（）+''+this）；
$（'.test_row'）。文本（''）
}
else$（'.new_row'）.html（$（'.new_row'）.html（）+''+this）；
})
$（this.html（$（'.new_row'）.html（））
})
$（“.draggable”）.draggable({
附于：'正文'，
游标：{top:0，left:30}，
回复：“不变量”，
助手：“克隆”
});
$（“.drop\u area p span”）.可拖放({
activeClass：“ui状态默认值”，
hoverClass:“ui状态悬停”，
接受：“：非（.ui可排序帮助程序）”，
结束：功能（事件、用户界面）{
$（this.css（'height'，'10px'）；
},
输出：功能（事件、用户界面）{
$（this.css（'height'，'1px'）；
},
drop：函数（事件、用户界面）{
$（此）.替换为（“
”）
}
})
})

---

您也可以查看结果

谢谢@borza adrian的快速回复。然而，我无法看到它的工作。我在结果屏幕的最底部看到“可拖动”文本，它在JSFIDLE中不可拖放。我错过了什么明显的东西吗？再次感谢您的支持。您好，很抱歉我没有看到它在Chrome上不起作用。我改进了我的版本，所以它在这里：。顺致敬意，出色的工作，博尔萨。唯一缺少的部分是可拖动文本在拖放后打印两次，并且在拖放后失去可拖动性。第一次拖放后，可拖动文本仍应可拖动。顺便说一句，我喜欢你的想法，通过查找线的高度来插入可放置区域的

。这对我来说是最令人费解的事情。