magnet.js是一款jQuery拖拽插件。它可以是实现DOM元素的拖拽、分组拖拽、对齐等功能,非常强大。
使用方法
安装:
npm install magnet --save
import Magnet from '@lf2com/magnet.js'; // Or const Magnet = require('@lf2com/magnet.js');
jQuery版本在HTML文件中引入。
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery-magnet.min.js"></script>
初始化插件
let magnet = new Magnet();
添加拖拽元素。
<div class="magnet"> ... </div>
magnet.add(document.querySelectorAll('.magnet'));
设置元素吸附距离。
magnet.distance(30); magnet.distance(30); // get
是否允许元素对齐。
magnet.enabledAlignOuter(true); magnet.enabledAlignInner(true); magnet.enabledAlignCenter(true); magnet.enabledAlignParentCenter(false); magnet.enabledAlignOuter();
限制元素在指定父元素中。
magnet.stayInParentEdge(true);
magnet.js插件的github网址为:https://github.com/lf2com/magnet.js