可放置区域中的jQuery可放置区域

Question

我有一个名为dropable的无序列表<ul class="droppable">.在无序列表中,我动态生成了名为list的列表项<li class="placeholder"></li>,这些列表项也是可放置的.

在占位符之间删除可拖动项目时,一切正常.但是当在其<li class="placeholder"></li>自身上放置可拖动项目时,可拖动项目将附加到占位符和无序列表.

所以我得到了它的双重克隆.

这是一个有视觉例子的jsfiddle.我知道在我的页面上获得双重克隆是合乎逻辑的,但我不知道如何禁用它...

任何帮助是极大的赞赏!

更新:如果您将可拖动项目垂直拖动到可放置元素上,它们会自动追加？怎么可能？

Answer 1

您可以尝试解决此问题的一种方法是将您的所有行为移至您的sortable并droppable仅用于进行切换以确定您需要的行为。这样，您就可以在一个地方处理所有事情，这应该可以解决在同一元素上同时使用sortable和所带来的一些不良影响。droppable像这样：

在您的 droppable 中，您将开关设置为over和out，然后设置您需要的对象。

 $("li.placeholder").droppable({

                accept: "li.to-drag",
                hoverClass: "correct",
                activeClass: "active",
                revert: false,
                tolerance: "pointer",
                over: function (e, ui) {
                   curDrag = ui.draggable;
                   curTarget = e.target;
                                        curThis = $(this);
                    overSortable = true;
                },
                out: function (e, ui) {
                    overSortable = false;
                },

                drop: function (event, ui) {

                }

            });

然后，在beforeStop发生 的情况下sortable，您检查变量是否overSortable为 true 并在那里设置行为。所有引用 ui.draggable、this 和 event.target 的内容都需要替换为您在 droppable 中设置的对象。一个更好的方法是让一个函数处理所有这些行为并将它们作为参数传递。

beforeStop: function (e, ui) {
                if (overSortable) {
                   curDrag.addClass('placeholder');
                   var dragging = curDrag.find("img").remove();

                   curThis.append(dragging).addClass("dropped");
                   curThis.droppable('disable');

                    var day = curDrag.attr('data-id');
                    var index = $(curTarget).index();

                    //...

                } else {
                    ui.item.addClass('placeholder')
                }

仍然需要进行调整，尚不完全清楚到底应该发生什么以及何时发生，但这可以使工作变得更容易，而不是尝试管理在删除元素时触发的多个事件，您只管理一个。

http://jsfiddle.net/ts290vth/4/