0

我正在尝试一些有点困难的事情。我正在研究一个新想法，但我不知道最好的选择。

我在容器 div 中有 3 个水平 div。第一个 div 的宽度为 250，第二个的宽度为 400，第三个的宽度为 240。

<div id="container">
<div id="div1">This is div 1.  It comes first.</div>
<div id="div2">This is div 2.</div>
<div id="div3">This is the last div</div>
</div>  <!-- ends container -->

现在，我正在尝试做的事情。我希望能够单击 div 内的文本并将其拖动到另一个 div，这将使用 ajax 对文本进行排序。我可以为此编写 jquery 可排序代码（除非有人拥有它或想要编写它）。我只需要知道使用什么方法来做到这一点，因为容器的宽度不同，我只想拖动文本而不是整个容器，我不想自己移动实际的 div。我有一个想法，以某种方式编码仅包含文本的内部 div，但不确定这是否可行。文本只能在其容器内移动。

有任何想法吗？

4

2 回答 2

1

使用 wrap 或 wrapInner 将内容与元素一起包装，并使用 'connectWith' 选项在该元素上设置可排序，以将其链接到其他 div。

$(function() {
    $('#container div').each(function() {
        $(this).wrapInner('<div/>').sortable({
            connectWith: '#container div'
        });;
    });
});

WrapInner 文档：http ://api.jquery.com/wrapInner/

可使用 ConnectWith 进行排序：http: //jqueryui.com/sortable/#connect-lists

小提琴：http: //jsfiddle.net/4SS5N/

于 2013-11-08T05:09:00.263 回答
1

您可以将文本放在<p>标签内，然后将.mousedown()事件添加到每个<p>标签。当事件被触发时移动<p>鼠标（您可以将位置更改为绝对位置，并且在 jquery 主页上有鼠标跟踪的示例），移动时<p>您可以限制值，使其不会离开您的容器。最后通过.mouseup()事件，您可以检查最终位置，找出它被丢弃在哪个 div 中并处理它。

于 2013-11-08T04:57:47.990 回答