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

這不是錯誤。 實際上，在您的小提琴中，碰撞代碼可以正常工作。 問題在於，拖動事件結束后，對撞機會卡在障礙物上。 有時，它會靠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)