在 jQuery 中控制可拖动的移动答案

【问题标题】：Control draggable movement in jQuery在 jQuery 中控制可拖动的移动
【发布时间】：2011-04-11 14:30:42
【问题描述】：

如何在 jquery 中控制可拖动对象的移动？

我需要做一些类似于“对齐网格”的操作，其中可拖动元素会移动每个“x”和“y”像素

我不能使用 "grid: [x, y]" (2D) 因为我需要在等距网格 (3D) 上进行拖动（我稍后会开发网格，我首先需要控制拖动）

例如：当我开始拖动时，可拖动对象不应该移动，当“x”和“y”在某些条件下时，它必须捕捉到另一个位置

提前致谢！

【问题讨论】：

标签： jquery draggable positioning

【解决方案1】：

尝试使用 http://jqueryui.com/demos/draggable/ 的 .draggable() 函数中固有的选项

基本上它说您需要将snap 选项设置为true，如下所示：

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

snapMode "...确定可拖动元素将捕捉到的捕捉元素的哪些边缘。如果 snap 为 false，则忽略。可能的值：'inner'、'outer'、'both'。" snapTolerance 是“......距应该发生捕捉的捕捉元素边缘的像素距离。”

或者尝试使用grid 选项。这是为了做你想做的事而创建的： "...Grid 将拖动助手捕捉到网格，每个 x 和 y 像素。数组值：[x, y] 代码示例”：

使用指定的网格选项初始化可拖动对象。

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

在初始化之后获取或设置网格选项。

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

希望这对您有所帮助。

【讨论】：

附上一张图片以澄清：see image 如果使用图像“A”中的网格选项，我可以捕捉到绿色瓷砖，但不能捕捉蓝色瓷砖。如果我设置一个较小的网格，结果是我可以捕捉到蓝色瓷砖，也可以捕捉到红色的瓷砖，它们不是有效的瓷砖，参见图片“B”
也许您可以在 jsFiddle.net 中启动您的代码，然后将链接粘贴回此处供我查看和编辑...

【解决方案2】：

好的，我找到了我要找的东西！

in this link 是我需要的一段代码

代码是这样的：

//内拖：function(event, 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;

我更改了一些常量以适应我的网格...

【讨论】：