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

我想要的是我应该能够拖放＆＃39; .draggable＆＃39;元素放入段<p>标记。这是细节。下拉应该可以作为以下两种方式之一。

只需在段落的行之间删除可拖动的内容，当删除时，它应该在删除时将段落分成两段。被删除的元素应该在这两段之间。
或者，只有段落的末尾（即关闭</p>标记之后）才能删除draggable，无论段落内的哪个位置都被删除。

感谢任何帮助。 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

在contenteditable中拖放行或段落

1 个答案: