Draggable element makes it snap to vertices around it with a high snapTolerance
I just wanted to create a mesh with a dragged element and make it snap to the vertices around the element that I am dragging. It happens that if the snapTolerance is too large (ie grid size: 20px), but the asset is not divisible by 20 in size ... it will not snap to the next vertex, but it will make a 20px transition to the next block. I don't know if I'm clear, but here's a jsfiddle that might help you understand this better.
In this example, I would like the right side to touch the next vertex before the next-block-jump. Is this possible with jQuery UI right now?
I can decrease the snapTolerance, but the instant effect will not be as smooth as the dragged items can vary in size.
I would like it to always hover over the vertices, but with this, the edges of the dragged element snap to every vertex around.
$(".draggable-block").draggable({
snapTolerance: 20,
snap: '.guide-line'
});
source to share
Try using this parameter instead of binding:
$(".draggable-block").draggable({
//snapTolerance: 20,
//snap: '.guide-line',
//snapMode: "inner",
grid: [ 5, 5 ]
});
http://api.jqueryui.com/draggable/#option-grid
It looks like JQuery UI only drags the top-left anchors and always aligns with the lines at that location.
You can try to do something on the drag event and see if there is anything useful in the ui parameter:
http://api.jqueryui.com/draggable/#event-drag
Do you need to use a 20px grid? If not, you can define grid lines based on the width or height of the item being dragged.
var grid = $('<div>', {'id': 'grid'});
var gridWidth = $('.draggable-block').width()/5;
var guideLinePos = gridWidth;
var guideLabel = "";
while(guideLinePos <= 1000) {
if(((guideLinePos - gridWidth) % gridWidth) == 0) {
guideLabel = "<div class='guide-line vertical-line'></div>";
$(guideLabel).css( "left", guideLinePos+"px" ).appendTo(grid);
}
guideLinePos = (guideLinePos + gridWidth);
}
source to share
Unfortunately the JS script either does not illustrate the problem: or the problem is that the object cannot be evenly divided by the grid (IE: 60px * 60px block does not fit well in a 40 * 40 grid)
I would suggest you take a look at the Gsap Draggable Library for a solution to this problem. This is a pretty good job of solving the problem.
source to share