Управление перетаскиваемым движением в JQuery

Question

как я могу управлять перемещением перетаскиваемого объекта в jquery?

Мне нужно сделать что-то похожее на «привязку к сетке», где перетаскиваемый элемент перемещается через каждые пиксели «x» и «y»

Я не могу использовать «grid: [x, y]» (2D), потому что мне нужно перетащить изометрическую сетку (3D) (я разберу сетку позже, сначала мне нужно будет управлять перетаскиванием)

например: когда я начинаю перетаскивание, перетаскиваемый объект не должен двигаться, он должен переместиться в другое положение, когда "x" и "y" находятся в определенных условиях

спасибо заранее!

Answer 1

Попробуйте использовать опции, присущие функции .draggable () при http://jqueryui.com/demos/draggable/

в основном это говорит о том, что вам нужно установить опцию snap на true, например:

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

snapMode "... определяет, к каким краям элементов привязки будет привязываться перетаскиваемый объект. Игнорируется, если привязка имеет значение false. Возможные значения:" inner "," external "," both "." И snapTolerance имеет значение «... Расстояние в пикселях от краев элемента привязки, на котором должно происходить замыкание».

Или попробуйте использовать опцию grid. Это сделано для того, чтобы делать именно то, что вы хотите: "... Сетка привязывает перетаскивающий помощник к сетке каждые пиксели x и y. Значения массива: [x, y] Примеры кода ":

Инициализировать перетаскиваемый объект с указанным параметром сетки.

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

Получить или установить параметр сетки после инициализации.

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

Надеюсь, это поможет вам.

Answer 2

хорошо, я нашел то, что искал!

по этой ссылке был фрагмент кода, который мне был нужен

код такой:

// внутри перетаскивания: функция (событие, пользовательский интерфейс)

    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;

Я изменил некоторые константы, чтобы приспособиться к моей сетке ...