jQuery可拖动和appendTo不起作用

Question

我是一名可以翻译文本的助手。

我使用jQuery UI的可拖拽功能，但选项“appendTo”无法正常工作。然而，其他选项如“containment”或“grid”则能正常工作。这是代码：

HTML

<div id="demo">
</div>
<div id="sidebar">
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div> 
</div>

脚本

jQuery(".item").draggable({ appendTo: "#demo", grid: [ 10, 10 ], containment: "#demo" });

CSS

#demo {
    width: 500px;
    height: 500px;
    border: 1px solid black;
    float: left;
}
#draggable {
    background: red;
    width: 50px;
    height: 50px;
}
#sidebar {
    float: left;
    width: 300px;
}
.item {
    cursor: pointer;
    background: black;
    width: 100px;
    height: 100px;
    margin: 10px;
}

这里有一个实时演示：http://jsfiddle.net/fzjev/。

- MatthewK

Answer 1

这里有一个关于此问题的未解决bug - Draggable：appendTo选项与helper：'original'一起不起作用。

建议的解决方法是使用helper：'clone'，并在拖动开始/停止时隐藏/显示原始元素。

例如：

$('.draggyThing').draggable({
        appendTo: '.dropArea',
        helper: 'clone',
        start: function (event, ui) {
            $(this).hide();
        },
        stop: function (event, ui) {
            $(this).show();
        }
    });

你可能想在 droppable 元素的 drop 上手动添加拖动项目。

 $('.dropArea').droppable({
        accept: '.draggyThing',
        drop: function (event, ui) {
            $('.dropArea').append(ui.draggable);
        }
    });

- RYFN

---

这实际上似乎更像是对OP问题的回答和解决方案，以便具有与预期相同的行为。 - Arjun Mehta

Jquery Sortable的工作方式相同，但是sortable是在可排序项目的容器元素上启动的，因此在这种情况下，您将想要使用ui.item.hide()/show()而不是$(this)。 - Kristian Sandström

Answer 2

看起来，对于appendTo选项要被识别，被拖动的项目必须在body之外。

从jQuery UI 1.8.18（大约在第275行）开始

if(!helper.parents('body').length)
  helper.appendTo((o.appendTo == 'parent' ? this.element[0].parentNode : o.appendTo));

在您的示例中，if语句的评估结果为false，因此appendTo逻辑不会执行。

- Ian Robinson

---

http://jsfiddle.net/fzjev/ 拖动一个项目，您会发现它可以在 #demo 中拖动，但是 <div class="item"></div> 不会附加到 #demo 中。 - MatthewK

我更新了之前的回答（其实更像是一个问题），并提供了更加完整的答案。老实说，我不确定为什么它被设置成这样，但至少现在我们知道发生了什么。 - Ian Robinson

Answer 3

在我的情况下，这些示例运行良好：

$("[drag='true']").draggable({
    drag: handleDragDrag,
    start: handleDragStart,
    stop: handleDragStop,
    helper: 'clone',
    appendTo: 'body'
})
function handleDragStart(ev, ui) {
    $(this).show();
}
function handleDragDrag(ev, ui) {
}
function handleDragStop(ev, ui) {
    $(this).show();
}

- lmcDevloper