2

我目前正在设计一个内联文本编辑器。用户将能够将图像拖放到他们想要的任何地方的编辑器中。

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

但我不知道如何div根据坐标将 a 分成两部分（可以从 jQuery 放置处理程序中获得）。谁能给我一个关于如何做的想法？

4

2 回答 2

6

我想我明白了你想要做什么的要点，我制作了一个简短的脚本来展示一种可能性。我将文本拆分为每个字符一个 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 一分为二，中间有图像。

于 2013-01-29T23:32:54.250 回答
0

你的问题让我有点困惑。但是你有没有研究过 jQuery UI api 中的可拖动和可排序。

http://jqueryui.com/sortable/

http://jqueryui.com/droppable/

它们非常适合启用自分类容器。鉴于它们适用于 div，您应该能够让它们为此工作。（给定一点 jQuery 肘部润滑脂）

于 2013-01-29T04:53:23.283 回答