控制jQuery中的可拖动运动 [英] Control draggable movement in jQuery
问题描述
如何控制jquery中可拖动对象的移动?
how can I control de movement of a draggable in jquery?
我需要执行类似于捕捉到网格"的操作,其中可拖动对象每移动"x"和"y"像素
I need to do something similar to the "snap to grid" where the draggable moves every "x" and "y" pixels
我不能使用"grid:[x,y]"(2D),因为我需要在等距网格(3D)上进行拖动(我将在以后开发网格,首先需要控制拖动)
I can't use "grid: [x, y]" (2D) because I need to make the drag on an isometric grid (3D) (I will develop the grid later, I first need to controll the drag)
例如:当我开始拖动时,可拖动对象不应移动,当"x"和"y"处于特定条件下时,它必须捕捉到另一个位置
for example: when I start the dragging, the draggable shouldn't move, it has to snap to another position when the "x" and "y" are under certain conditions
提前谢谢!
推荐答案
好的,我已经找到了想要的东西!
ok, I've found what I was looking for!
在此链接中是我需要的代码
代码是这样的:
//内部拖动:功能(事件,用户界面)
//inside drag: 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;
我更改了一些常量以适应我的网格...
I changed some of the constants to adjust to my grid...
这篇关于控制jQuery中的可拖动运动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!