Isn't there anyone who has some experience with drag & drop that can
help?
Each <td> tag in the table has the class "droppable". Each <td> holds
a <div> that has the class "draggable". What are the names of the
fields that control the position of the <div> inside the <td>? Is it
offsetLeft & OffsetTop? Do I have to change offsetParent for the
<div> to the <td> it's been moved to?
Thanks
Tony
On Sep 18, 11:36 pm, TonyV <vitabi...@verizon.net> wrote:
> 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 jquery-ui@googlegroups.com
To unsubscribe from this group, send email to
jquery-ui+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
