Geeks With Blogs

News Locations of visitors to this page
Ariel Popovsky's Blog Aventuras y desventuras con .net

I needed to create a web page that let the user assign one item of a grid to a target by dragging the item and dropping it on a row on a different grid. I immediately thought about using JQuery UI draggables and droppables but it didn’t work as expected.
After looking for a solution for some time I finally came to this post by David Petersen explaining how to provide a helper element to JQuery to wrap the floating row while dragging and it worked perfectly.

source.draggable({
        helper: function(event) {
            return $('<div class="drag-row"><table></table></div>')
                .find('table').append($(event.target).closest('tr').clone()).end();
        },
        appendTo: 'body'
    });

 

To prevent a table from accepting its own rows I used the accept option on the droppable function.

accept: source.selector

 

The result:

$(function(){
  setupDragDrop($('#t1 tr'), $('#t2 tr'));
  setupDragDrop($('#t2 tr'), $('#t1 tr'));
});

function setupDragDrop(source, target) {
    source.draggable({
        helper: function(event) {
            return $('<div class="drag-row"><table></table></div>')
                .find('table').append($(event.target).closest('tr').clone()).end();
        },
        appendTo: 'body'
    });

    target.droppable({
        drop: function(event, ui) {
            alert('row dropped ' + $(this).text());
        },
        accept: source.selector
    });
}
​

Working sample a jsbin.

Technorati Tags: ,,
Posted on Wednesday, February 24, 2010 6:27 PM | Back to top


Comments on this post: Drag and Drop table rows between tables with JQuery UI

# re: Drag and Drop table rows between tables with JQuery UI
Requesting Gravatar...
I tried replacing the '<div class="drag-row"><table></table></div>'
with "<image src='/Images/Common/Envelope.png'>". The image shows up, but the problem is that the image doesnt appear under the mousepointer, but right over the left most column in the row regardless where i click on the row. Is there a way to make the image appear right under the mousepointer where I am clicking on the row?

Rion Carpadakis
www.mightyplace.com
Left by Rion Carpadakis on Sep 22, 2011 10:02 AM

# re: Drag and Drop table rows between tables with JQuery UI
Requesting Gravatar...
the sample doesn't do anything on IE9
with chrome it just pops an alert but rows doesn't move anywhere
Left by Mike on Jul 25, 2012 5:44 AM

# re: Drag and Drop table rows between tables with JQuery UI
Requesting Gravatar...
It was not working for me. :(
it was on Firefox 14.0.1
Left by Hendra Pratama on Sep 14, 2012 5:50 AM

# re: Drag and Drop table rows between tables with JQuery UI
Requesting Gravatar...
Hi,
Once the row has been added to the new table , you cannot drag and drop back to the original table. Any idea on this?
Left by Dhaval Shah on Sep 24, 2012 8:59 AM

Your comment:
 (will show your gravatar)


Copyright © Ariel Popovsky | Powered by: GeeksWithBlogs.net | Join free