jQuery可拖动自定义捕捉到网格 [英] jQuery Draggable Custom Snap to Grid
问题描述
我在项目中使用jQuery UI Draggable.我有一个复选框，可切换可拖动对象上的网格(10x10网格)选项.
I'm using jQuery UI Draggable in a project. I have a checkbox that toggles the grid (10x10 grid) option on the draggable objects.
但是，当重新打开网格时，关闭网格时移动的对象不会与关闭网格时未移动的对象对齐.简而言之，这些对象位于不对齐的单独网格上.
However, when the grid is turned back on, objects that are moved when the grid was off don't line up with objects that were not moved when the grid was turned off. In short, the objects are on separate grids that do not line up.
所以我想让对象捕捉到10的增量(当用户拖动它们时，不仅仅是释放时捕捉)，这样当打开网格时对象将始终排成一行，但是我可以似乎无法弄清楚如何在jQuery UI中实现这一点.有什么想法吗?
So I'd like to have the objects snap to increments of 10 (while the user is dragging them, not just snap on release), so that objects will always line up when the grid is turned on, but I can't seem to figure out how to implement this in jQuery UI. Any ideas?
推荐答案
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#draggable { width: 100px; height: 70px; background: silver; }
</style>
<script>
$(document).ready(function() {
// $("#draggable").draggable({ grid: [10, 10] });
$("#draggable").draggable();
$("#draggable").draggable({
stop: function(event, ui) {
var left = ui.position.left;
var top = ui.position.top;
left = left - left % 10;
top = top - top % 10;
$("#draggable").offset({left:left,top:top});
console.log($("#draggable").position());
}
});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="draggable">Drag me</div>
</body>
这篇关于jQuery可拖动自定义捕捉到网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
