Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a jQuery draggable actually snap to an equally sized droppable

I have my draggable and droppable setup correctly using jquery-ui. They are both the same size, so the draggable should fit nicely on to the droppable. Is there any way to make the draggable snap in to the middle of the droppable so as to completely cover it? It seems if I use the snap: parameter it just snaps to the edges, and not necessarily to the middle of the droppable.

like image 396
weexpectedTHIS Avatar asked Dec 12 '22 12:12

weexpectedTHIS


2 Answers

Would this not do the job, give or take a pixel:

    drop: function(event, ui) { 
    $(ui.draggable).offset($(this).offset());
    }
like image 158
Likwid_T Avatar answered Jan 16 '23 12:01

Likwid_T


Or since you're already using jQuery UI, there's the position method

drop: function(event, ui) { 
  ui.draggable.position({of: $(this)});
}
like image 21
poshest Avatar answered Jan 16 '23 13:01

poshest