JavaScript 和 jQuery；如何进行捕捉拖放

Question

我正在向你们所有优秀的人寻求有关进行捕捉拖放的最佳方式的建议。

作为一个简单棋盘游戏的一部分，我目前正在用 JS 编写代码（使用 jQuery 实现效果），用户应该能够将图块从停靠栏拖到网格上。

如何完成以下目标（最好使用 jQuery）。

1. 启用拖放到网格上
2. 确保在拖放过程中项目捕捉到网格的每个正方形
3. 如果瓷砖完全脱离网格放置，则返回原始位置（停靠）
4. 如果图块在网格上方（此时已捕捉），则将当前 x 和 y 返回给函数
5. 使任何被拖动的图块略微透明，并在到位或返回停靠点后变为全彩

很抱歉问了这么大的问题，我只是在网上找不到任何准确的建议可以让我做到这一点！

非常感谢，

编辑：答案
1&2 由“可拖动”解决：http://jqueryui.com/demos/draggable
3 通过“droppable”解决http://jqueryui.com/demos/droppable
4 通过上面解决验证然后$(this).position.left && $(this).position.top
5 可以通过简单的$(this).css({opacity:0.5}) 在开始拖动时解决，而在结束拖动时则相反

简单！

Answer 1

希望这会对你有所帮助，这是用于在 jQuery 中使用 snap 进行拖放

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