这是Magnet.js库的jQuery版本，它允许您创建可拖动元素，并支持移动时的自动捕捉。

如何使用它:

1.下载jquery-magnet.min.js脚本，并将其放在最新的jquery库之后。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery-magnet.min.js"></script>

2.使用可选设置初始化Magnet.js插件。所有可能的设置：

• 距离：元素吸引同一组中其他元素的距离
• 吸引人的：使元素具有吸引力
• allowCtrlKey:允许CTRL键使元素不可处理
• 允许拖动：允许拖动
• 使用相对单位：是否使用相对单位
• 住宿密码：使所有元素都留在父容器中
• 对齐外部：对齐外部边缘
• 对齐内部：对齐内边缘
• 对齐中心：将元素集中到其他元素
• 对齐租户中心：将元素居中到父容器

let $magnet = $.magnet({
    // options and defaults
    distance: 0,
    attractable: true,
    allowCtrlKey: true,
    allowDrag: true,
    useRelativeUnit: false,
    stayInParent: false,
    alignOuter: true,
    alignInner: true,
    alignCenter: true,
    alignParentCenter: false
});

3.向组中添加元素。

$magnet.add('.magnet');

4.从组中移除元素。

$magnet.remove('.magnet');
$magnet.removeFull('.magnet');
$magnet.clear();
$magnet.clearFull();

5.您还可以使用以下API方法调整设置。

// distance
$magnet.distance(3);
 
// attractable
$magnet.attractable(); // get
$magnet.attractable(true); // set
 
// allows CTRL key
$magnet.allowCtrlKey(); // get
$magnet.allowCtrlKey(true); // set
 
// allows draggable
$magnet.allowDrag(); // get
$magnet.allowDrag(true); // set
 
// whether or not to use relative unit
$magnet.useRelativeUnit(); // get
$magnet.useRelativeUnit(true); // set
 
// sets/gets aligments
$magnet.alignOuter(true);
$magnet.alignInner(false); 
$magnet.alignCenter(true);
$magnet.alignParentCenter(false); 
$magnet.alignOuter(); // get
 
// makes elements stay in the parent
$magnet.stayInParent(); // get
$magnet.stayInParent(true); // set
 
// makes elements stay in the parent
$magnet.stayInParent(); // get
$magnet.stayInParent(true); // set

6.事件处理程序。

$magnet.on('magnetstart', function(evt) {
  // do something
});
 
$magnet.on('magnetend', function(evt) {
  // do something
});
 
$magnet.on('magnetchange', function(evt) {
  // do something
});

更新日志：

v1.0.9 (2022-01-10)

• 错误修复

2021-09-22

• 已更新依赖项

v1.0.8 (2020-04-05)

• 已删除调试日志

预览截图

在jQuery magnet.js中 Snapping创建可拖动元素