javascript - Jquery draggable collision detection bug -

there bug in jquery-draggable-collision library collision detection. divs overlapping though function collision detection called. can not solve it, if can me, grateful. example of bug here: 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');     } }); 

this isn't bug. in fact, in fiddle, collision code working fine. problem that, after drag event ends, collider snapped obstacle. snaps inner , snaps outer depending on position of elements.

luckily, can define snapmode option outer, prevent elements overlapping post collision. add option:

$("#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');         } });