javascript - 可拖动元素使其以高 snapTolerance 捕捉到它周围的顶点

Question

我只是想制作一个带有拖动元素的网格，并使其捕捉到我拖动的元素周围的顶点。发生这种情况，如果 snapTolerance 太高(网格大小即:20px)但 Assets 的大小不能被 20 整除......它不会捕捉到下一个顶点但它会跳到下一个 block 20px。我不知道我是否清楚，但这是一个 jsfiddle这可能有助于您更好地理解这一点。

在这个例子中，我希望右侧在下一个 block 跳跃之前接触下一个顶点。现在使用 jQuery UI 可能吗？

我可以降低 snapTolerance，但 snappy 效果不会那么平滑，因为拖动的元素可能大小不同。

我想让它始终卡在顶点上，但要让被拖动元素的边缘捕捉到周围的每个顶点。

$(".draggable-block").draggable({
    snapTolerance: 20,
    snap: '.guide-line'
});

Answer 1

尝试使用此选项而不是快照:

$(".draggable-block").draggable({
    //snapTolerance: 20,
    //snap: '.guide-line',
    //snapMode: "inner",
    grid: [ 5, 5 ] 
});

http://api.jqueryui.com/draggable/#option-grid

看起来 JQuery UI 可拖动对象仅与其左上角对齐，并始终与该位置的线条对齐。

您可以尝试对拖动事件做一些事情，看看是否对 ui 参数有任何帮助:

http://api.jqueryui.com/draggable/#event-drag

是否需要使用 20px 的网格？如果没有，您可以根据可拖动对象的宽度或高度定义网格线。

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);
}