jQuery 可拖动自定义对齐网格

2024-01-09

我在项目中使用 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(使用前将#替换为@)

jQuery 可拖动自定义对齐网格 的相关文章

随机推荐