jQuery可拖动防止重叠 [英] jquery draggable prevent overlap

问题描述

我正在创建一个网站，两个div在拖动时不应互相重叠.我创建了 jsFiddle文件

I am creating a website, where two div should not overlap each other when dragging them.I have created a jsFiddle file

以下也是代码

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

我希望两个div具有相同的类名 预先感谢.

I want to have the same class name for both the div Thanks in advance.

推荐答案

我想出了一些"hack"来解决这个问题.这里的问题是，拖动div是其自身的障碍(所有共享同一个类).因此，我要做的是在拖动开始时删除类"，并在停止时重新添加它. jsFiddle

I came up with sort of a "hack" to deal with this. The issue here is the dragged div is its own obstacle (all share same class). So what I did is remove the class "" when the dragging starts and re-add it when it stops. jsFiddle

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

这篇关于jQuery可拖动防止重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！