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