javascript - Jquery 可拖动碰撞检测错误

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

这不是错误。事实上，在你的 fiddle 中，碰撞代码工作得很好。问题是，在拖动事件结束后，对撞机会捕捉到障碍物。有时它捕捉 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');
        }
});