I've got a table that contains elements. I want the user to be able
to drag & drop elements (divs) from one cell in the table to another.
When you drop an element on to another cell, I want the two cells to
swap their elements. And I want both elements to appear in their
respective cells as though they had been placed there originally.
I've got the code working but the problem is that the element that is
dropped on to the target cell is offset from its new home the distance
it was dragged from the original cell, so it doesn't look like it's
actually in the target cell. I'm not sure what I have to do to get it
back where it belongs.
Here's the code I've written. Can someone tell me how I get the thing
to appear in the right place?
jQuery(".draggable").draggable();
jQuery(".droppable").droppable({
drop: function(event, ui) {
// Get references to the HTML objects
for the table cells
involved in the swap
var src_cell =
ui.draggable.context.parentNode;
var dst_cell = this;
// Get refrences to the HTML objects
for the divs in the table
cells
var src_div = ui.draggable.context;
var dst_div = this.childNodes[1];
// Swap the divs between the two cells
src_cell.removeChild( src_div );
dst_cell.removeChild( dst_div );
src_cell.appendChild( dst_div );
dst_cell.appendChild( src_div );
// Fix the offsets of the src & dst divs
// src_div.offsetLeft =
src_div.offsetTop = 1;
// Get the target row & column
coordinates
var dst = dst_cell.id.split('-');
var dst_row = dst[1];
var dst_col = dst[2];
return true;
}
});
Thanks
Tony
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
