JavaScript和jQuery; 如何捕捉拖放

Question

我正在寻找所有精彩人士的建议,以最好的方式进行捕捉拖放.

作为一个简单的棋盘游戏的一部分,我目前正在用JS编写代码(使用jQuery进行效果),用户应该能够将棋盘从棋盘拖到网格上.

如何完成以下目标(最好使用jQuery).

1. 启用拖放到网格上
2. 确保在拖放项目期间捕捉到网格的每个方格
3. 如果瓷砖完全放在网格上,请返回原始位置(底座)
4. 如果图块位于网格上(此时捕捉),则将当前x和y返回到函数
5. 使任何瓷砖被拖动略微透明,并在适当的位置变成全色或返回停靠

很抱歉问这么大的问题,我在网上找不到任何准确的建议,这将是我实现的目标!

非常感谢,

编辑:答案
1和2由"draggable"解决: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})内部开始拖动和相反的完成拖动来解决

Simples!

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