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

Question

我有一个名为<ul class="droppable">的可放置无序列表。 在无序列表中，我动态生成名为<li class="placeholder"></li>列表项，它们也是可放置的。

在占位符之间删除可拖动项目时，一切正常。 但是当在<li class="placeholder"></li>本身上删除可拖动项目时，可拖动项目会附加到占位符和无序列表。

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

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

任何帮助是极大的赞赏！

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

Answer 1

您可以尝试解决此问题的一种方法是将所有行为移至sortable并使用droppable进行切换以确定所需的行为。 这样，您可以在一个地方处理所有内容，这可以解决在同一元素上同时具有sortable和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) {

                }

            });

然后，在sortable beforeStop事件中，检查变量overSortable是否为真，并在那里设置行为。 所有引用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/

Answer 2

管理让它为你工作：

function dropping () {

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

            accept: "li.to-drag",
            hoverClass: "correct",
            activeClass: "active",
            revert: false,
            tolerance: "pointer",

            drop: function (event, ui) {

                var dragging = ui.draggable.find("img");

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

                var day = $(ui.draggable).attr('data-id');
                var index = $(event.target).index();

                $(this).attr("data-id", day);
                $(this).attr("date-order", index);
                $(this).addClass("drop-"+ index);
                $(this).attr("data-content", "");

注意： var dragging = ui.draggable.find("img"); 这条线让你在拖放时复制副本，所以你只需要删除clone(); 。

它在dest创建了拖动项目的克隆。

现在注意这个：

$("#dropzone").droppable({

        accept: "li.to-drag",
        revert: false,
        tolerance: "pointer",

        drop: function (event, ui) {

            $(this).append(dragging);
            //$("li.to-drag").addClass("placeholder");
            $(this).droppable('disable');

        }

    });

}

占位符类的东西会给你带来麻烦。

希望这可以帮助。