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