1

我正在尝试将内容拖放到我的 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>标签中。这是细节。下降应按以下任一方式工作。

  1. Draggable 只需要在段落的行之间被 DROPPED，当被拖放时，它应该在放置点将段落分成两个段落。并且被删除的元素应该在这两段之间。
  2. 或者，draggable 应该只放在段落的末尾（即结束</p>标记之后），无论它被放在段落内的哪个位置。

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

4

1 回答 1

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


        }
    })
})

你也可以在这里查看结果

于 2014-04-23T10:55:33.327 回答