Javascript jQuery UI可拖放、还原和接受元素

我一直在试验这段代码：它突出显示并让您知道可以将框放到哪些框上，但它不接受任何可拖放的。有人知道我如何修改这个代码来接受一个dropable，而不是仅仅恢复它吗

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

---

我将从以下内容开始：

• 重复使用内置的查询ui功能，例如可拖放的“”或“”参数
• 如果有少量容器-您可以单独声明“Dropables”，并使用“accept”，例如，只允许某些类别的可拖动（如下面的演示中所示）
• 尝试“破解”draggables和droppable是可能的，但不是很容易，特别是对于复杂的元素（如果draggables和droppable的html结构比flat div更复杂）

样本：

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

---编辑---

---

您需要将克隆（）附加到正确的div中，如果它们不匹配，则还原它们，首先

接受：

所有可拖动元素，然后在

拖放：

部分处理还原。 此外，您还需要为克隆并拖动的元素创建并保存原始位置，以便将其还原到原始位置，然后将其从页面中删除

以下是最终的脚本演示：

---

玩得开心

你在哪里定义放置时会发生什么？我想我们这里缺少一些代码？我已经使用了accept，问题是所有的框都接受所有的DragTables，因为类对于所有的DragTables都是相同的，但是唯一分隔DragTables的是一个唯一的id号，我不知道如何使用它，所以所有的DragTables不会被所有的下拉列表接受。感谢您的快速回复。tborychowski您的演示效果很好，但我仍然希望不可拖放的框仍然以红色突出显示，而您的演示没有这样做。