我在项目中使用 jQuery UI Draggable。我有一个复选框可以切换可拖动对象上的网格(10x10 网格)选项。
但是,当网格重新打开时,网格关闭时移动的对象不会与网格关闭时未移动的对象对齐。简而言之,这些对象位于不对齐的单独网格上。
所以我想让对象以 10 为增量对齐(当用户拖动它们时,而不仅仅是在释放时对齐),以便对象在网格打开时始终对齐,但我似乎无法弄清楚如何在 jQuery UI 中实现这一点。有任何想法吗?
<!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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)