Question

我一直在尝试使用此代码：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");
    } 
});

Answer 1

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

以下是finall脚本演示：

JSnippet demo draggable & droppable

玩得开心！

Answer 2

我会从这样的事情开始：

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

<强>示例：

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

Fiddle demo

---编辑---

Updated demo

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

2 个答案: