jquery draggable prevent overlap

这一生的挚爱 提交于 2021-02-07 10:15:24

问题


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

also the following is the code

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

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


回答1:


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');
    }
});


来源:https://stackoverflow.com/questions/26395170/jquery-draggable-prevent-overlap

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!