CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-draggable
Marcus Lind
Marcus Lind

Reputation: 11450

Draggable snap to horisontal and vertical line centered to element

I have a draggable div, and I would like to make it snap to a straight line vertical to the center of the div, and to a horisontal line going from the center of the div. See image below as example. The black square should be snapped to the red line vertical and horisontal to the div.

This should work wherever the div is located. So after moving the div, the snap-lines should still be centered to the new position of the div.

enter image description here

Upvotes: 1

Views: 2160

Answers (1)

Marcus Lind
Marcus Lind

Reputation: 11450

I was able to solve it by creating a .x-guide and a .y-guide div with lowest z-index to prevent it from overlapping any draggable element. The x-guide have 100% width and the y-guide have 100% height.

When I drag my element I use the stop event to reposition the guides with the following code:

$('.element').draggable({
    appendTo: "body",
    snap: ".x-guide, .y-guide",
    snapMode: "inner",
    stop: function(event, ui) {
        $('.x-guide').css("top", $('.element').css("top"));
        $('.y-guide').css("left", $('.element').css("left"));
    }
});

You can see JSFiddle here: http://jsfiddle.net/c6L9rLxt/

Upvotes: 2

Related Questions