让jQuery可拖动以捕捉到特定网格

（ 注意： 有些人提出了类似的问题，但过于具体而没有得到有用的答案 ）

jQuery UI的可拖动窗口小部件具有捕捉到网格的选项，但无法设置网格相对于什么。

例如，我们的放置目标中有一个明确定义的20×20网格。 在放置目标内从0,0开始的拖动项将与网格对应捕捉。 但是，从不同位置开始或在放置目标外部的拖动项目将不会与该网格对齐。

http://jsfiddle.net/FNhFX/5/

HTML：

 
Drag me
 
Drag me
 
 
Drag me 

JS：

 $(function() { $(".drag-item").draggable({ grid: [20, 20] }); $(".outside-drag-item").draggable({ grid: [20, 20], helper:"clone" }); $(".drop-target").droppable({ accept: ".drag-item" }); }); 

有没有办法使用jQuery draggable捕捉到特定的网格？

Answer 1

我会继续在这里发一个答案，虽然我是通过你问的后续问题来到这里的。

您可以在jQuery UI draggable上的drag事件中轻松创建自己的对齐网格function。

基本上，您要检查当前ui位置在拖动拖动到网格的任何点处的接近程度。 该接近度总是可以表示为位置的剩余部分除以网格。 如果该余数小于或等于snapTolerance，则只需将该位置设置为没有该余数的位置。

在散文中说这很奇怪。 在代码中应该更清楚：

现场演示

 // Custom grid $('#box-3').draggable({ drag: function( event, ui ) { var snapTolerance = $(this).draggable('option', 'snapTolerance'); var topRemainder = ui.position.top % 20; var leftRemainder = ui.position.left % 20; if (topRemainder <= snapTolerance) { ui.position.top = ui.position.top - topRemainder; } if (leftRemainder <= snapTolerance) { ui.position.left = ui.position.left - leftRemainder; } } }); 

Answer 2

作为尝试在jQuery UI中使用网格选项的替代方法，我创建了自己的网格（可以使用css使其可见或不可见），然后使用snap选项并指定每个网格线的类。

对于你原来的jsfiddle，我添加了以下css：

 .gridlines { display: none; position:absolute; background-color:#ccc; } 

和以下javascript：

 function createGrid(size) { var i, sel = $('.drop-target'), height = sel.height(), width = sel.width(), ratioW = Math.floor(width / size), ratioH = Math.floor(height / size); for (i = 0; i <= ratioW; i++) { // vertical grid lines $('
').css({ 'top': 0, 'left': i * size, 'width': 1, 'height': height }) .addClass('gridlines') .appendTo(sel); } for (i = 0; i <= ratioH; i++) { // horizontal grid lines $('
').css({ 'top': i * size, 'left': 0, 'width': width, 'height': 1 }) .addClass('gridlines') .appendTo(sel); } $('.gridlines').show(); } createGrid(20); 

这是jsFiddle（ http://jsfiddle.net/madstop/46sqd/2/ ）