jQuery UI Draggable and Droppable，恢复和接受元素答案

【问题标题】：jQuery UI Draggable and Droppable, reverting and accepting elementsjQuery UI Draggable and Droppable，恢复和接受元素
【发布时间】：2013-07-22 15:44:30
【问题描述】：

我一直在尝试使用此代码：jsfiddle 它突出显示并让您知道您可以将这些盒子放到哪些盒子上，但它不接受任何可放置的东西。有谁知道我如何更改此代码以接受 droppable 而不是只是恢复？

$(".DragItem").draggable({
    revert: true,
    helper: "clone" 
});

$(".DropItem").droppable({
    tolerance: "touch",
    over: function (event, ui) {
        var dropItem = $(this);
        var dragItem = $(ui.draggable);
        var valid = String(dropItem.data("id")).indexOf(dragItem.data("id")) > -1;
        if (valid) {
            dropItem.addClass("DropTargetValid");
        } else {
            dropItem.addClass("DropTargetInvalid");
        }
    },
    out: function (event, ui) {
        var dropItem = $(this);
        dropItem.removeClass("DropTargetValid");
        dropItem.removeClass("DropTargetInvalid");
    },
    deactivate: function (event, ui) {
        var dropItem = $(this);
        dropItem.removeClass("DropTargetValid");
        dropItem.removeClass("DropTargetInvalid");
    } 
});

【问题讨论】：

你在哪里定义下降时会发生什么？
我认为我们在这里遗漏了一些代码？

标签： javascript jquery jquery-ui draggable droppable

【解决方案1】：

您需要将 clones() 附加到正确的 div 并在它们不匹配时还原它们，首先 accept: 所有可拖动元素，然后在 drop: 部分处理还原。您还需要为您克隆和拖动的元素创建并保存原点位置，以便您可以将其恢复到其原始位置，然后将其从页面中删除。

这是最终的脚本演示：

JSnippet demo draggable & droppable

玩得开心！

【讨论】：

【解决方案2】：

我会从这样的事情开始：

重新使用内置的查询用户界面功能，例如droppable 的“accept”或“activeClass”参数
如果容器数量很少 - 您可以单独声明“droppables”并使用“accept”来表示，例如只允许某些类别的可拖动对象（如下面的演示）
尝试“破解”可拖动对象和可放置对象是可能的，但不是很容易，尤其是对于复杂元素（如果可拖动对象和可放置对象具有比平面 div 更复杂的 html 结构）

示例：

$(".drop1").droppable({
    accept: '.drag1',
    activeClass: 'DropTargetValid',
    drop: function (ev, ui) {
        $(ev.target).append(ui.draggable.clone());
    }
});

Fiddle demo

--- 编辑---

Updated demo

【讨论】：

我已经使用了接受，问题是所有的框都接受所有的可拖动对象，因为类对于所有对象都是相同的，但唯一将可拖动对象分开的是唯一的 id 编号，我没有知道如何使用它，以便所有可拖放对象都不会接受所有可拖动对象。
感谢您的快速回复。 tborychowski 您的演示工作正常，但我仍然希望不可放置的框仍以红色突出显示，而您的演示没有这样做。