CODEWITHSUNDEEP
javascriptjqueryjquery-uidraggablejquery-ui-draggable
PolGraphic
PolGraphic

Reputation: 3364

Align draggable element to grid that starts at parent's position

I have some HTML structure:

<body>
    <div id="board">
        <div id="block" />
    </div>
</body>

The #board can be positioned anywhere.

For the example, lets assume that it's position: relative; left: 3px; top: 7px; (notice that top & left are not the multiplication of 10), body has margin: 0, padding 0.

I want to make my #block to be snapped to 10px x 10px grid. But that grid should start at top-left corner of the parent (#board), not at top-left corner of the page!

So it should snap my #block to (3,7), (13, 17), (23, 27), ... instead of (0,0), (10, 10), (20, 20)....

How to achieve it?

When I use:

jQuery(value).draggable({
    containment: "#board",
    grid: [10,10],
    snap: "#board"
});

It snap to 10px x 10px grid from top-left corner of the page, not #board (and only additionally snap to edges of #board, which is not the solution).

Upvotes: 0

Views: 1691

Answers (2)

sillfishes
sillfishes

Reputation: 390

Seems like you have the right idea. If you position #block relative to #board and follow Shningamae's advice by setting "snap" to true you'll achieve the desired result. You can verify the result using jQuery's offset method:

$('#block').draggable({
    containment: "#board",
    grid: [10,10],
    snap: true,
    stop: function() {
        var offset = $(this).offset();
        console.log("Top: " + offset.top + " Left: " + offset.left);
    }
});

Here's an example: http://jsfiddle.net/63G8H/

Upvotes: 2

Shinigamae
Shinigamae

Reputation: 862

Snap is a boolean value that

If set to a selector or to true (equivalent to '.ui-draggable'), the draggable will snap to the edges of the selected elements when near an edge of the element.

Default: false

I think your snap option should be "true".

Also we have another option for the snap:

snapMode

Determines which edges of snap elements the draggable will snap to. Ignored if snap is false. Possible values: 'inner', 'outer', 'both'

Default: 'both'

Source: JQuery SDK Draggable

Upvotes: 1

Related Questions