Jquery可拖放冲突检测缺陷

Question

在带有冲突检测的jquery可拖式冲突库中存在一个bug。虽然碰撞检测功能被调用，但是Divs是重叠的。我解决不了，所以如果有人能帮我，我会非常感激的。此bug的示例如下：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

这些检查需要添加到库代码(函数_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)

Answer 2

这不是窃听器。事实上，在你的小提琴里，碰撞代码工作得很好。问题是，在拖曳事件结束后，对撞机被折断到障碍物上。有时它会抓取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');
        }
});