jQuery Forum

I was using jQuery UI/Draggable and jQuery UI/Droppable to implement some drag-and-drop behaviour and felt that there was something missing when using the implemented snap behaviour.

What I wanted was that my draggables either fully snapped to my droppables (e.g. as if they are snapping on top of the droppables) or not snap at all. All available snapModes: 'inner', 'outer' and 'both' caused the draggables to snap to too many lines (whichever mode I tried).

Anyway, to cut to the chase, I figured there is room for a new snapMode. The one I'm suggesting here is the 'corner' snapMode, which causes the draggable to snap to any of the four corners of the snap-to element. This generic snapMode can also be uses to implement the snap behaviour I was looking for: If you make the draggable the same size as the droppable, all four snap-to corners will coincide into one.

Since a picture is worth a thousand words, and a live demo is worth a thousand pictures, check out the following demo site that implements the suggested snap mode:

I also attached a mail-format patch that implements the above. Comments on the patch are welcomed as replies to this post.

Kind regards,

Marcel Toele