magnet 拖拽拖动排序jQuery插件

创客云


magnet.js是一款jQuery拖拽插件。它可以是实现DOM元素的拖拽、分组拖拽、对齐等功能,非常强大。
使用方法
jQuery版本在HTML文件中引入

  1. <script src="//code.jquery.com/jquery.min.js"></script>
  2. <script src="jquery-magnet.min.js"></script>

初始化插件

  1. let magnet = new Magnet();

添加拖拽元素

  1. <div class="magnet">
  2.   ...
  3. </div>
  1. magnet.add(document.querySelectorAll('.magnet'));

设置元素吸附距离

  1. magnet.distance(30);
  2. magnet.distance(30); // get

是否允许元素对齐

  1. magnet.enabledAlignOuter(true);
  2. magnet.enabledAlignInner(true); 
  3. magnet.enabledAlignCenter(true);
  4. magnet.enabledAlignParentCenter(false);
  5. magnet.enabledAlignOuter();

限制元素在指定父元素中

  1. magnet.stayInParentEdge(true);

Github网址:https://github.com/lf2com/magnet.js

演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/55741.html
云模板

发表评论