JavaScript＆jQuery;如何做對齊拖動

我正在尋找所有你精彩的人的建議，以最好的方式做到捕捉拖放。JavaScript＆jQuery;如何做對齊拖動

作爲一個簡單棋盤遊戲的一部分，我目前正在使用JS（使用jQuery for effects）進行編碼，用戶應該能夠將棋子從碼頭拖到網格中。

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

啓用拖放到網格拖曳期間

確保和掉落物品與網格對齊

的每個正方形如果瓦片被完全置於關閉網格，返回到原來的地方（塢）

如果瓷磚是在網格（在這一點上搶購），返回當前x & y以功能

進行任何瓦片被拖動略透明，並進入全綵一次到位或返回到碼頭

對不起，要問這麼大的問題，我只是找不到任何準確的建議在線上，我會做到這一點！

非常感謝，

編輯：答案
2通過「拖動」解決：http://jqueryui.com/demos/draggable
3通過「可投放」解決http://jqueryui.com/demos/droppable
4是通過上述求解來驗證然後$(this).position.left & & $(this).position.top
5是通過一個簡單的$(this).css({opacity:0.5})內部開始拖動和finis上的相反h drag

簡單！

來源

2010-06-04 Pez Cuckow

你有沒有看着http://jqueryui.com/demos/droppable/ – Kamal 2010-06-04 10:55:08

這或許應該被拆分爲單獨的的問題。一些涉及jQuery插件，一些遊戲機制和一些顯示/圖形。 – mVChr 2010-06-04 11:05:51

大約有互動演示：

我希望這些演示可以幫助你。

2010-06-04 10:55:23 Saleh

希望這會幫助你，這是將&落帶止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); 
    } 
}

來源

2014-05-23 13:02:57

JavaScript＆jQuery;如何做對齊拖動

回答

相關問題