在jQuery中控制可拖動的運動

Question

如何控制jQuery中可拖動的運動？

我需要做類似「對齊網格」的東西，每一個「X」和「Y」像素

我不能使用「網格：[X，Y]」可拖動移動（2D ），因爲我需要在等距網格（3D）上進行拖動（稍後我將開發網格，我首先需要控制拖動）

例如：當我開始拖動時，可拖動的元素不應該移動當「x」和「y」在一定條件下時，它必須捕捉到另一個位置

在此先感謝！

Answer 1

好吧，我找到了我在找的東西！

in this link是一段代碼，我需要

的代碼是這樣的：

//內部阻力：功能（事件，UI）

var offset = $(this).parent().offset(); 
    var GRID_SPACING = 10; 
    var SELECTION_OFFSET_X = 10; 
    var SELECTION_OFFSET_Y = 3;    

    if (parseInt(event.clientX/GRID_SPACING) % 2 == 0) 
    { 
     var row = Math.floor((event.clientY - offset.top)/GRID_SPACING) + Math.floor(event.clientX/(2 * GRID_SPACING)); 
     var col = -Math.floor((event.clientY - offset.top)/GRID_SPACING) + Math.floor((event.clientX + GRID_SPACING)/(2 * GRID_SPACING)); 
    } 
    else 
    { 
     var row = Math.floor((event.clientY + GRID_SPACING/2 - offset.top)/GRID_SPACING) + Math.floor(event.clientX/(2 * GRID_SPACING)); 
     var col = -Math.floor((event.clientY + GRID_SPACING/2 - offset.top)/GRID_SPACING) + Math.floor((event.clientX + GRID_SPACING)/(2 * GRID_SPACING)); 
    } 

    var new_x = row * GRID_SPACING + col * GRID_SPACING - SELECTION_OFFSET_X; 
    var new_y = (row * (GRID_SPACING/2)) - (col * (GRID_SPACING/2));      

    if(event.clientX == new_x + GRID_SPACING * 2) 
    { 
     ui.position.left = new_x; 
     new_x = event.clientX; 
    } 

    if(event.clientY == new_y + GRID_SPACING) 
    { 
     ui.position.top = new_y; 
     new_y = event.clientY; 
    }      

    ui.position.left = new_x; 
    ui.position.top = new_y; 

我改變了一些常量的以適應我的網格...

Answer 2

嘗試使用在.draggable（）函數中固有的選項在http://jqueryui.com/demos/draggable/

基本上它說你需要有snap選項設置爲true這樣的：

$(".selector").draggable({ snap: true, snapMode:'outer', snapTolerance:40 }); 

SNAPMODE」 ...確定可拖動元素將捕捉哪些捕捉元素的邊緣。如果捕捉爲假，則忽略。可能的值：'inner'，'outer'，'both'。「 並且snapTolerance是「...與捕捉元素邊緣發生貼緊的距離（以像素爲單位）」。

或嘗試使用grid選項。這是創建做的正是你想要什麼： 「......柵格捕捉拖動幫手，一個網格，每個x和y像素陣列值：[X，Y] 代碼示例」：

初始化拖動與指定的網格選項。

$(".selector").draggable({ grid: [50, 20] }); 

在init之後獲取或設置網格選項。

//getter 
var grid = $(".selector").draggable("option", "grid"); 
//setter 
$(".selector").draggable("option", "grid", [50, 20]); 

希望這可以幫助你。