I have my screen divided into two DIV
s. In the left DIV
I have a few 50x50 pixel DIV
s, in the right DIV
I have an empty grid made of 80x80 LI
s. The DIV
s on the left are draggable, and once dropped on a LI
, they should snap to center of that LI
.
Sounds simple, right? I just don't know how to get this done. I tried by manipulating the dropped DIV
's top
and left
CSS properties to match those of the LI
they're dropped into, but the left
and top
properties are relative to the left DIV
.
How can I best have the dropped element snap to the center of the element it's dropped into? That's gotta be simple, right?
Edit: I'm using jQuery UI 1.7.2 with jQuery 1.3.2.
Edit 2: For whoever else has this problem, this is how I fixed it:
I used Keith's solution of removing the dragged element and placing it inside the dropped-on element in the drop
callback of the droppable plugin:
function gallerySnap(droppedOn, droppedElement)
{
$(droppedOn).html('<div class="drop_styles">'+$(droppedElement).html()+'</div>' );
$(droppedElement).remove();
}
I don't the dropped element to be draggable again, but if you do, just bind draggable to it again.
For me this method also solved the problem I had when positioning the dropped elements (which would be relative to the left DIV
) and scrolling inside the second DIV
. (Elements would remain fixed on page, now they scroll along).
I did play with the snap options to make it look good while dragging, so thanks to karim79 for that suggestion.
I probably won't win any Awesome Code prizes with this, so if you see room for improvement, please share!
I found that Keith's method worked for me. Since his answer doesn't include an example implementation, I'll post mine:
$('.dropTarget').droppable({
drop: function(ev, ui) {
var dropped = ui.draggable;
var droppedOn = $(this);
$(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
}
});
or, slightly more concisely:
$('.dropTarget').droppable({
drop: function(ev, ui) {
$(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);
}
});