JavaScript & jQuery; how to do snapping drag and drop

Question

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 complete 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 completely 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.com/demos/draggable
3 is solved by "droppable" http://jqueryui.com/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!

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