(注：有些人问过类似的问题,但是太具体了,没有提供任何可用的答案)
jQuery UI的可拖动小部件具有用于捕捉到网格的选项,但无法设置网格是相对的.
例如,我们在下降目标中有一个明确定义的20×20网格.从下拉目标中的0,0开始的拖动项将与网格对应.但是,从不同位置或放置目标之外开始的拖动项目将不会与该网格对齐.
HTML：
<div class="drop-target">
<div class="drag-item">Drag me</div>
<div class="drag-item" style="left:87px;top:87px;">Drag me</div>
</div>
<div class="outside-drag-item">Drag me</div>
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捕捉到特定的网格？
解决方法
我也要去,并在这里发布答案,虽然我是通过
a followup question you asked来到这里.
您可以在jQuery UI draggable的drag事件中轻松创建自己的对齐网格功能.
基本上,您希望检查当前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;
}
}
});
