Question

jquery-draggable-collision库中存在一个带有碰撞检测的错误。即使调用碰撞检测功能，Div也会重叠。我无法解决，所以如果有人能帮助我，我将非常感激。此错误的示例如下：http://jsfiddle.net/q3x8w03y/10/

$("#dragMe1").draggable({
    snap: ".bnh",
obstacle: ".bnh",
preventCollision: true,
containment: "#moveInHere",
start: function(event, ui) {
        $(this).removeClass('bnh');
    },
    stop: function(event, ui) {
        $(this).addClass('bnh');
    }
});
$("#dragMe2").draggable({
    snap: ".bnh",
obstacle: ".bnh",
preventCollision: true,
containment: "#moveInHere",
start: function(event, ui) {
        $(this).removeClass('bnh');
    },
    stop: function(event, ui) {
        $(this).addClass('bnh');
    }
});

Answer 1

这不是错误。事实上，在你的小提琴中，碰撞代码工作正常。问题是，在阻力事件结束后，对撞机会卡在障碍物上。有时它会捕捉inner，有时会捕捉outer，具体取决于元素的位置。

幸运的是，您可以将snapMode选项定义为outer，这样可以防止元素重叠发生冲突。只需添加选项：

$("#dragMe1").draggable({
        snap: ".bnh",
    snapMode: "outer",
    obstacle: ".bnh",
    preventCollision: true,
    containment: "#moveInHere",
    start: function(event, ui) {
            $(this).removeClass('bnh');
        },
        stop: function(event, ui) {
            $(this).addClass('bnh');
        }
});
$("#dragMe2").draggable({
        snap: ".bnh",
    snapMode: "outer",
    obstacle: ".bnh",
    preventCollision: true,
    containment: "#moveInHere",
    start: function(event, ui) {
            $(this).removeClass('bnh');
        },
        stop: function(event, ui) {
            $(this).addClass('bnh');
        }
});

Answer 2

这些检查需要在库代码（函数_overlaps）中添加，所以现在，它完全正常http://jsfiddle.net/q3x8w03y/11/

if (c1.x1==c2.x1&&c1.y1==c2.y1) ||(c1.x2==c2.x2&&c1.y2==c2.y2) || (c1.x2==c2.x2&&c1.y1==c2.y1) || (c1.x1==c2.x1&&c1.y2==c2.y2) ||(c1.x1>=c2.x1&&c1.x2<=c2.x2&&c1.y1<=c2.y1&&c1.y2>=c2.y2)

Jquery可拖动碰撞检测错误

2 个答案: