容器之间的 JQuery 拖放问题答案

【问题标题】：JQuery Drag N Drop Issue Between Containers容器之间的 JQuery 拖放问题
【发布时间】：2013-09-27 06:37:44
【问题描述】：

好的，我在这里遇到了一个问题，我有可拖动和可放置的奇怪的是，一旦我把它放在一个容器上，我就有重新创建可拖动以将其移回。

基本上我有来源

$("#mykeys ul li").draggable({
revert:"invalid",
helper: "clone",
cursor: 'move'});

然后我有可放置的块。我遇到的问题是如何让实际的可放置块拖放彼此之间。

所以基本上我可以将 n drop 从原点拖放到类容器但我不能在类容器之间拖放

我需要使用 sortables 吗？

这里是 JS 小提琴

http://jsfiddle.net/rmatakajr/FN7Xx

感谢您的帮助

【问题讨论】：

试试$(ui.draggable).appendTo(this);
好人！然而，这不是主要问题，它肯定更优雅。我试图弄清楚的问题是如何以排序类型的方式在 droppable 之间移动。
所以说我把所有的draggables都移到了droppables。我将如何在所有 droppables 之间进行排序？这就是我现在在敲我的头
查看下面的更新......接受标准已更改
你太棒了！感谢那！顺便说一句，有什么方法可以使列表项可排序，以免列表项相互覆盖？

标签： javascript jquery html jquery-ui drag-and-drop

【解决方案1】：

试试

$(".drop-container").droppable({
    activeClass: "ui-state-highlight",
    accept: "#mykeys ul li, .drop-container li",
    //connectWith: ".drop-container",
    drop: function (event, ui) {
        $(this).empty();
        $(ui.draggable).appendTo(this);
    },
    out: function (event, ui) {
        console.log('dragged out');
    }
});

演示：Fiddle

【讨论】：