I am looking for advice from all you wonderful people on the best way to do snapping drag and drop.

As part of a simple board game I am currently coding in JS (using jQuery for effects) users should be able to drag tiles from a dock onto a grid.

How does one plete the following objectives (preferably using jQuery).

1. Enable drag and drop onto the grid
2. Ensure during drag and drop items snap to each square of the grid
3. If the tile is placed pletely off the grid, return to original place (dock)
4. If the tile is over the grid (at this point snapped), return current x & y to a function
5. Make any tiles being dragged slightly transparent, and go full color once in place or returned to dock

Sorry to ask such a big question, I just can't find any accurate advice online that would be me achieve this!

Many thanks,

Edit: THE ANSWERS
1&2 are solved by "draggable":
3 is solved by "droppable"
4 is solved by the above to validate and then $(this).position.left && $(this).position.top
5 is solved by a simple $(this).css({opacity:0.5}) inside start on drag and the opposite on finish drag

Simples!

I am looking for advice from all you wonderful people on the best way to do snapping drag and drop.

As part of a simple board game I am currently coding in JS (using jQuery for effects) users should be able to drag tiles from a dock onto a grid.

How does one plete the following objectives (preferably using jQuery).

1. Enable drag and drop onto the grid
2. Ensure during drag and drop items snap to each square of the grid
3. If the tile is placed pletely off the grid, return to original place (dock)
4. If the tile is over the grid (at this point snapped), return current x & y to a function
5. Make any tiles being dragged slightly transparent, and go full color once in place or returned to dock

Sorry to ask such a big question, I just can't find any accurate advice online that would be me achieve this!

Many thanks,

Edit: THE ANSWERS
1&2 are solved by "draggable": http://jqueryui./demos/draggable
3 is solved by "droppable" http://jqueryui./demos/droppable
4 is solved by the above to validate and then $(this).position.left && $(this).position.top
5 is solved by a simple $(this).css({opacity:0.5}) inside start on drag and the opposite on finish drag

Simples!

• javascript
• jquery
• drag-and-drop

Share Improve this question Follow edited Jun 4, 2010 at 16:04 Pez Cuckow asked Jun 4, 2010 at 10:51 Pez CuckowPez Cuckow 14.4k1818 gold badges8282 silver badges132132 bronze badges 2

• Have you looked at jqueryui./demos/droppable – Kamal Commented Jun 4, 2010 at 10:55
• This should probably be split into separate questions. Some involve jQuery plugins, some game mechanics, and some display/graphics. – mVChr Commented Jun 4, 2010 at 11:05

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

Hope this will help you, this is for Drag & Drop with snap in jQuery

var snap = 10; /* the value of the snap in pixels */
var l,t,xInit,yInit,x,y;
$(document).mousemove(function(e) {
  x = e.pageX;
  y = e.pageY;
  drag(snap);
});

$('#obj').mousedown(function(e){
  l=$('#obj').position().left;
  t=$('#obj').position().top;
  xInit = e.pageX;
  yInit = e.pageY;
})


function drag(snap){
    w=$('#obj').width();
    h=$('#obj').height();
    var left = l+x-xInit;
    var top = t+y-yInit;
  if(!snap==0){
    left = (left/snap).toFixed()*snap;
    top = (top/snap).toFixed()*snap;
    $('#obj').css('left',left);
    $('#obj').css('top',top);
  }else{
    $('#obj').css('left',left);
    $('#obj').css('top',top);
  }
}