3

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

2 回答 2

1

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

这是最终的脚本演示：

JSnippet 演示可拖放

玩得开心！

于 2013-07-22T21:35:09.543 回答
0

我会从这样的事情开始：

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

样品：

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

小提琴演示

- - 编辑 - -

更新的演示

于 2013-07-22T16:35:00.843 回答