jQuery拖放可重排的内容

Question

我目前正在设计一个内联文本编辑器.用户可以随时将图像拖放到编辑器中.

编辑器完全iFrame基于,在很大程度上依赖于嵌套div的样式和格式.现在,如果用户将图像拖放到内容的中间并将其放在那里,我希望将放置区域上方的内容打包成一个div,将图像放在其下面,并将放置区域下面的内容打包到另一个中div并放置在图像下方.

但是我不知道如何div根据坐标将其分成两部分(可以从jQuery drop handler获得).任何人都可以告诉我如何做到这一点？

Answer 1

我想我得到了你想要做的事情的要点,我做了一个简短的剧本来证明一个可能性.我将文本分成每个字符一个div,并使这些div可以排序,这样我就可以将图像拖放到文本中间

HTML

<span class="sortable">
       <img id="image" src="https://si0.twimg.com/profile_images/1842775519/profile_normal.png" />
        <input type="text" size="1" id="tb"/>
</span>

使用Javascript

$(function () {
    $(".sortable").sortable();  //Makes panel sortable (needs jquery and jquery UI)
    $("#tb").keyup(function () { //binds keyup event on the input box
        $('<div>' + $(this).val() + '</div>').insertBefore(this);  //adds the input box value to a new div and inserts it into the DOM before the input box itself
        $(this).val(''); // empties the input
    });
});

CSS

* {
    float:left
}
.sortable {
    border: solid 1px black;
    width:200px;
    float:left
}

在这里看到一个工作小提琴 http://jsfiddle.net/urbanbjorkman/cFfS9/1/

这可能是一个疯狂的帽子解决方案大块的文本.它仍然需要大量工作(显然因为这只是几行javascript)

但是将文本保留在一个div中并不是不可思议的.然后将它拆分为sortstart事件中的单独元素.在sortstop事件中,将所有连接文本重新连接在一起,并将图像保留在原来的位置.从而为你提供你所要求的div与div分成两半的图像.