jQuery UI可拖拽和放置，还原和接受元素。

Question

我一直在尝试使用这段代码：jsfiddle。它会突出显示可以将盒子放入的区域，但却无法接受任何可放置的内容。有没有人知道如何修改此代码以接受可放置的内容而不是仅仅恢复原状？

$(".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");
    } 
});

- user2607442

---

在哪里定义拖放时发生的事件？ - Ian

我认为在这里我们缺少了一些代码？ - Alicia

Answer 1

你需要将克隆元素（clones()）附加到正确的div上，如果它们不匹配则需要恢复它们的状态。首先，接受所有可拖动元素，然后在“drop:”部分处理恢复操作。 同时，你需要创建并保存克隆和拖动元素的原始位置，以便可以将其恢复到原始位置，然后从页面中删除它。 以下是最终脚本演示： JSnippet demo draggable & droppable 祝玩得愉快！

- Shlomi Hassid

Answer 2

我会从这样的地方开始：

• 重复使用内置的查询UI功能，例如可放置元素的“accept”或“activeClass”参数
• 如果容器数量较少，则可以单独声明“droppables”，并使用“accept”来仅允许某些类别的可拖动元素（如下面的演示中所示）
• 尝试“hack”可拖动和可放置元素是可能的，但对于复杂的元素（如果可拖动和可放置元素具有比简单的平面div更复杂的HTML结构），这并不容易。

示例：

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

演示Fiddle

--- 编辑 ---

更新的演示

- Dziad Borowy

---

我已经使用了accept，但问题是所有的框都接受所有的可拖动元素，因为它们的类别都相同，唯一区分它们的是一个独特的ID号码，我不知道如何利用这个ID号码，使得所有的可拖动元素不会被所有的放置区域所接受。 - user2607442

感谢您的快速回复。tborychowski您的演示很好，但我仍然希望那些不可放置的框仍然以红色突出显示，而您的演示没有做到这一点。 - user2607442