可拖动的元素使其捕捉到高点周围的顶点

我只是想用一个拖动的元素制作一个网格，并使它与我正在拖动的元素周围的顶点对齐。如果snapTolerance太高（网格大小即20px），但资产不能被20除尽，则不会捕捉到下一个顶点，但会跳到下一个块20px。我不知道我是否清楚，但这是一个jsfiddle，可能会帮助你更好地理解这一点。可拖动的元素使其捕捉到高点周围的顶点

在这个例子中，我希望右侧碰到下一个块跳转之前的下一个顶点。现在可以用jQuery UI吗？

我可以减少snapTolerance，但由于拖动元素的大小可能会有所不同，因此活动效果不会那么平滑。

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

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

来源

2014-10-02 msqar

我读了几个时间你的问题，但我不认为我明白你真正想要什么。你的小提琴演示似乎符合实际问题！ – Brewal 2014-10-06 19:05:37

只是玩了一下：[demo]（http://jsfiddle.net/ofk0smrf/5/）你可以使用6的'snapTolerance'，并使网格为“0宽度”，以防止捕捉到双方边界......我看不到任何适合更好的行为？ – Brewal 2014-10-06 19:17:24

让我在几分钟内检查Brewal，但我认为你是对的。 – msqar 2014-10-07 20:04:44

尝试使用这个选项，而不是捕捉的：

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

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

它看起来像JQuery用户界面拖动只与它的左上角对齐，并且总是在该点的线对齐。

你可以尝试做的拖动事件的东西，看看有没有什么有用的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); 
}

来源

2014-10-06 18:02:05 OrangeKing89

是的，我已经尝试过了......但是当你拥有不同尺寸的元素时，它有点让人搞不懂。即使尝试在拖动事件期间更改网格，但这不是一个好主意:( – msqar 2014-10-06 18:17:30

如果您有像158x67这样的元素，则无法使用网格选项 – msqar 2014-10-06 18:18:20

是的，网格必须是10x10,20x20或40x40。 – msqar 2014-10-06 19:07:03

不幸的JS拨弄或者不说明问题：或问题是物体不能均匀地由网格来划分（IE：一个60像素* 60像素块不以40 * 40格合身）

我建议你看看Gsap Draggable Library来解决这个问题。它在解决这个问题上做得很好。

来源

2014-10-12 00:03:26 Burdock

请避免链接唯一的答案。 – Mrchief 2014-10-13 17:17:35

可拖动的元素使其捕捉到高点周围的顶点

回答

相关问题