I got it working late last night, after 11 pm. I am not all that familiar with jQuery's methods; I found it in src_div.style.left & src_div.style.top. They both just had to be reset to "" & everything snapped right where I wanted it.
I've got another problem to resolve, but it's not jquery related. I think I just need to increase maxlength to fix that. Thanks for the reply. Tony On Sep 20, 12:27 am, Nate Laws <[email protected]> wrote: > 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 -~----------~----~----~----~------~----~------~--~---
