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

【问题标题】：Draggable element make it snap to the vertices around it with a high snapTolerance可拖动元素使其以高 snapTolerance 捕捉到它周围的顶点
【发布时间】：2014-10-02 18:26:08
【问题描述】：

我只是想用一个被拖动的元素制作一个网格，并让它捕捉到我正在拖动的元素周围的顶点。发生这种情况，如果 snapTolerance 太高（网格大小，即：20px）但资产的大小不能被 20 整除......它不会捕捉到下一个顶点，但它会跳转到下一个块 20px。我不知道我是否清楚，但这里有一个 jsfiddle 可能会帮助您更好地理解这一点。

在此示例中，我希望右侧在下一个块跳转之前触摸下一个顶点。现在用 jQuery UI 可以吗？

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

我想让它一直停留在顶点上，但让拖动元素的边缘捕捉到周围的每个顶点。

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

【问题讨论】：

我读了几次你的问题，但我认为我不明白你真正想要什么。您的小提琴演示似乎符合实际问题！
只是玩了一下：demo 您可以使用 6 的 snapTolerance 并将网格设置为“0 宽度”，以防止捕捉到边框的两侧...我可以没有看到任何更适合的行为？
让我在几分钟后检查一下 Brewal，但我认为你是对的。

标签： javascript jquery html css jquery-ui

【解决方案1】：

尝试使用此选项而不是 snap：

$(".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

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

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

【讨论】：

是的，我已经尝试过了......但是当你有不同大小的元素时，它有点搞砸了。甚至尝试在拖动事件期间更改网格，这不是一个好主意:(
如果你有像 158x67 这样的元素，你不能使用网格选项
是的，网格必须是 10x10、20x20 或 40x40。

【解决方案2】：

不幸的是，JS fiddle 要么没有说明问题：要么问题是对象不能被网格平均划分（IE：60px*60px 块不适合 40*40 网格）

我建议您查看Gsap Draggable Library 以解决此问题。它很好地解决了这个问题。

【讨论】：

请避免仅链接答案。