jQuery UI Draggable和Droppable，还原和接受元素

Question

我一直在试验这段代码： jsfiddle它突出显示并让你知道哪些盒子你可以放下盒子，但它不接受任何droppables。 有谁知道我怎么能改变这个代码接受一个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");
    } 
});

Answer 1

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

这是finall脚本演示：

JSnippet演示可拖动和可放置

玩得开心！

Answer 2

我会从这样的事情开始：

• 重用内置的query-ui功能，例如droppable的“ accept ”或“ activeClass ”参数
• 如果有少量容器 - 你可以单独声明“droppables”并使用“accept”来例如只允许某些类别的draggables（如下面的演示）
• 尝试“破解”draggables和droppables是可能的，但不是很容易，特别是对于复杂的元素（如果draggables和droppables有更复杂的html结构而不仅仅是扁平的div）

样品 ：

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

小提琴演示

---编辑---

更新的演示