Question

我有带可拖动元素的容器。现在当碰撞元素返回到原始位置时。是否可以在具有不同类的元素上启用冲突？

示例：

<div class="level1 button">button text</div>
<div class="level1 label">label text</div>
<div class="level2 image"></div>
<div class="level2 camera"></div>

在上面的示例中，当碰撞.button与.label元素应该返回到原始位置。（同一级别1）。同样适用于.image和.camera。但是什么时候碰撞按钮与图像是可以的。

我目前的代码：

elem.draggable({
    revert: 'invalid',
    containment: "parent",
    start: function () {
        $(".editor > div").popover('hide');
    },
    stop: function (event, ui) {
        $(this).draggable('option', 'revert', 'invalid');
        if (!savePos) {
            scope.$apply(function () {
                scope.$eval(attr.xpos + '=' + ui.position.left);
                scope.$eval(attr.ypos + '=' + ui.position.top);
            });
        }
        savePos = false;
    }
}).droppable({
    greedy: true,
    tolerance: 'touch',
    drop: function (event, ui) {
        ui.draggable.draggable('option', 'revert', true);
        savePos = true;
    }
});

好的，我做到了。添加到自定义atrribute ui-level的元素并检入doppable：

.droppable({
    greedy: true,
    tolerance: 'touch',
    drop: function(event,ui){
    if($(ui.draggable.context).attr("ui-level") == $(event.target).attr("ui-level"))
       ui.draggable.draggable('option','revert',false);
    else
       ui.draggable.draggable('option','revert',true);

    savePos = true;
    }
})

Answer 1

想象一下这些国家的地图。每个国家/地区都是 droppable 元素。并且您有国家标志（ draggables ）需要在国家/地区删除。只能在国家/地区删除匹配标志。每个国家/地区和国旗都设置了data-country_id属性。

删除元素时，您想要比较它们。所有神奇的隐藏在accept参数中。

$("#map .country").droppable({
    hoverClass: "hovered",
    tolerance: 'pointer',
    accept: function (e) { if (e.data("country_id") == $(this).data("country_id")) return true; },
    drop: function( event, ui ) {
        //insert the code that runs after element has been succesfully dropped
    }
})

jQuery UI draggable / droppable - 还原某些元素

1 个答案: