Question

我正在寻找所有优秀人才的建议，以最好的方式进行捕捉拖放。

作为简单棋盘游戏的一部分，我目前正在用JS编写代码（使用jQuery进行效果），用户应该可以将棋盘从棋盘拖到网格上。

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

启用拖放到网格

确保在拖放项目期间捕捉到网格的每个方格

如果瓷砖完全脱离网格，请返回原始位置（停靠栏）

如果图块位于网格上（此时已对齐），则返回当前x＆amp; y到函数

将拖动的任何瓷砖略微透明，并在适当的位置使用全彩色或返回停靠

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

非常感谢，

编辑：答案
1＆amp; 2由“draggable”解决：http://jqueryui.com/demos/draggable
3由“droppable”http://jqueryui.com/demos/droppable解决通过上述方法解决了4以验证然后$(this).position.left＆amp;＆amp; $(this).position.top
5通过简单的$(this).css({opacity:0.5})内部开始拖动和相反的完成拖动

来解决

Simples！

Answer 1

有关于互动的演示：

我希望这些演示可以帮助你。

Answer 2

希望这会对你有帮助，这对于Drag和;在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);
  }
}

JavaScript＆amp; jQuery的;如何捕捉拖放

2 个答案: