jquery draggable防止重叠

Question

我正在创建一个网站，其中两个div在拖动时不应相互重叠。我创建了一个jsFiddle file

以下是代码

$(".butNotHere").draggable({
    obstacle: ".butNotHere",
    preventCollision: true,
    containment: "#moveInHere"
});

我希望这两个div都有相同的类名 提前谢谢。

Answer 1

我想出了一个“黑客”来解决这个问题。这里的问题是拖拽的div是它自己的障碍（所有共享同一类）。所以我做的是在拖动开始时删除类“”并在停止时重新添加它。 jsFiddle

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