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，这将防止元素重叠 post 碰撞。只需添加选项：

$("#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 可拖动碰撞检测错误

Jquery draggable collision detection bug

javascript

css

drag-and-drop

collision