Question

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

我在容器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，但不确定它是否有效。该文本只能在其容器内移动。

有什么想法吗？

Answer 1

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

Answer 2

使用wrap或wrapInner用元素包装内容，并使用'connectWith'选项在该元素上设置sortable以将其链接到其他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/

将内容拖动到不同的div元素而不移动div本身

2 个答案: