我建议在切换回 1、20 时,移动可拖动的对象,使其捕捉到您想要使用模除法的网格中的坐标。例如:(currentX - gridOriginX)% cellWidth,(currentY - gridOriginY)% cellHeight。
在下面的示例中,我只是使用了可拖动元素的原始位置来确定网格应该在哪里。我还使用可放置的“over”事件而不是“drag”事件来做到这一点。
HTML:
<div id="thing">
<div id="draggable5" class="draggable ui-widget-content">
<p>Drag Me</p>
</div>
</div>
<div id="thing2">
</div>
CSS:
#draggable5 {
width: 100px;
height: 100px;
border: 1px solid #999;
}
#thing {
height: 150px;
border: 1px solid #900;
}
#thing2 {
height: 150px;
border: 1px solid #00F;
}
Javascript:
$(document).ready(function () {
var obj = $("#draggable5");
obj.draggable( {
grid: [ 1, 20 ],
} ).data("init", obj.offset());
$("#thing").droppable({
over: function(e, ui) {
obj = ui.draggable;
var init = obj.data("init");
var here = obj.offset();
here.top = init.top + Math.floor((here.top - init.top) / 20) * 20;
here.left = init.left + Math.floor((here.left - init.left) / 1) * 1;
obj.offset(here);
obj.draggable( "option", "grid", [ 1, 20 ] );
}
});
$("#thing2").droppable({
over: function(e, ui) {
obj = ui.draggable;
obj.draggable( "option", "grid", [ 1, 1 ] );
}
});
});
小提琴:http: //jsfiddle.net/qaqDz/3/