I would try doing $(src_div).css({top:0,left:0}) because draggable changes
those element styles. Its a lot easier to use the jquery methods instead of
messing with offset* and related methods
On Sat, Sep 19, 2009 at 8:31 PM, TonyV <[email protected]> wrote:
>
> 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 <[email protected]> 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 [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
-~----------~----~----~----~------~----~------~--~---
