Question

how can I control de movement of a draggable in jquery?

I need to do something similar to the “snap to grid” where the draggable moves every “x” and “y” pixels

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)

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

thanks in advance!

Answer 1

ok, I’ve found what I was looking for!

in this link was the piece of code that I needed

the code is this:

//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…