jQuery UI Draggable，捕捉到网格
我有两个容器。 缩略图容器和“页面”容器。 两者都是div。 可以在两个容器之间来回拖动缩略图。 我已将缩略图设置为“无效”，因此如果它们被丢弃到其中任何一个容器之外，它们会回弹到两个容器中的一个。
缩略图必须捕捉到“页面”容器内的20×20网格。 这是客户端客户端可以将缩略图放在任何地方的“页面”容器中，但仍然能够整齐地排列它们。
问题是可拖动的’网格’选项似乎对此没有太大帮助。 当您开始拖动它时，似乎“网格”由可拖动位置决定，而不是表现为该页面具有可以捕捉的真实网格。
有没有办法解决这个问题，以便网格基于“页面”容器，而不是拖动它时拖动它的位置？
检查Jquery UI站点上的捕捉示例：
http://jqueryui.com/demos/draggable/#snap-to
您可以采用相同的示例并指定网格和捕捉参数。
然后，捕捉将基于快照选择器的左上角。
$( "#draggable5" ).draggable({ snap: ".ui-widget-header", grid: [ 80, 80 ] }); Jquery站点上的示例现在将基于大容器使“80×80”框快照。
在您的情况下，最简单的方法是创建一个100％宽度和高度的div，然后将snap：selector（使用css选择器）设置为该div，然后指定要捕捉到的网格……
祝好运
也许您可以尝试使用draggable上的start事件将起始位置舍入到最接近的20像素。
像（未经测试的……）：
$('#draggable').draggable( {snap : grid: [20,20]}, {start : function(event, ui) { var startPosition = $(ui.draggable).position(); $(ui.draggable).css({ 'left' : (Math.round(startPosition.left/20)*20)+'px', 'top' : (Math.round(startPosition.top/20)*20)+'px'}); } } );
我正在努力实现这一目标，但我正在将拖动的元素克隆到另一个容器中，这样更加棘手;-)我仍然需要弄清楚如何在启动事件中设置帮助程序的位置……
当然，只有起始位置已经是绝对位置（如拖动时），它才会起作用。
事实上，我几乎通过将此方法应用于stop事件并删除grid属性来实现它。
移动物体时没有获得任何视觉反馈，因为它本身没有网格本身，但是当它丢弃时，它会转到你自己的网格：
stop: function(event, ui) { var stopPosition = $(ui.draggable).position(); $(ui.draggable).css({'left' : (Math.round(stopPosition.left/20)*20)+'px', 'top' : (Math.round(stopPosition.top/20)*20)+'px'}); }
这是一个有效的例子： http ： //jsfiddle.net/qNaHE/3/