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

有關於交互的演示：

可拖動

可滴

可調整大小

可選擇的

可排序

希望這些演示可以為您提供幫助。

Answer 2

希望這會對您有所幫助，這適用於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);
  }
}