Question

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

编辑器完全基于iFrame，严重依赖于嵌套的div来进行样式设置和格式化。现在，如果用户将图像拖放到内容的中间并将其放在那里，我希望将放置区域上方的内容打包到一个div中，将图像放在其下方，以及下面的内容放置区域打包到另一个div并放置在图像下方。

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

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分割得到你所要求的内容。

Answer 2

你的问题让我感到困惑。但是你有没有看过jQuery UI api中的draggables和sortables。

http://jqueryui.com/sortable/

http://jqueryui.com/droppable/

它们适用于启用自我分类容器。鉴于他们适用于div，你应该能够让他们为此工作。（给出一点jQuery elbow-grease）

jQuery拖放可重排的内容

2 个答案: