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

• 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

1 Answer 1

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);
  }
}