Dragging divs beetween elements with JQuery.

Question

Hi! I've got a table grid(10x10), and images in some of it's cells. I wanna the images to be draggable beetween the cells of grid(it'd be great if i could easily get the new position(x,y) of image). I'm using newest JQuery.

Answer 1

You're going to need to use some sort of Drag and drop here. If you don't want to roll your own, use the jQuery UI extension for drag and drop. Check it out here: http://jqueryui.com/demos/draggable/

Answer 2

jQuery UI .draggable() and .droppable() will handle this nicely.

Here's a working fiddle that illustrates one way to drag an image among table cells, and get the resulting cell coordinates within the table.

The general idea is to designate your draggable (the image, perhaps):

$('#yourimage').draggable();

Then set your table cells as droppables:

$('#tbl td').droppable({
  hoverClass: 'over', // highlight cells as you drag over them
  drop: function( e, ui ){
    /* get drop cell coordinates (1-indexed) */
    var row = cell.closest('tr').prevAll().length + 1;
    var col = cell.closest('td').prevAll().length + 1;        
    otherStuff();
  }
});