CODEWITHSUNDEEP
jquerydraggablepositioning
Matías Cánepa
Matías Cánepa

Reputation: 5974

Control draggable movement in jQuery

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!

Upvotes: 4

Views: 3583

Answers (2)

Matías Cánepa
Matías Cánepa

Reputation: 5974

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...

Upvotes: 0

sadmicrowave
sadmicrowave

Reputation: 40972

Try using the options inherent in the .draggable() function at http://jqueryui.com/demos/draggable/

basically it says you need to have the snap option set to true like this:

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

snapMode "...determines which edges of snap elements the draggable will snap to. Ignored if snap is false. Possible values: 'inner', 'outer', 'both'." And snapTolerance is "...The distance in pixels from the snap element edges at which snapping should occur."

Or try using the grid option. This is created to do exactly what you want: "...Grid snaps the dragging helper to a grid, every x and y pixels. Array values: [x, y] Code examples":

Initialize a draggable with the grid option specified.

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

Get or set the grid option, after init.

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

Hopefully this helps you.

Upvotes: 1

Related Questions