jQuery拖拽插件Magnet.js

 查看演示  website  立即下载

更新时间：2020-02-26 23:38:51

Magnet.js

Magnet.js是一个JavaScript库，可对HTML元素进行分组并使它们相互吸引

jQuery version

• 配置磁铁吸引距离

• 切换为留在父元素中

• 与其他的外边缘/内边缘对齐

• 与其他x / y中心对齐

• 与父元素的x / y中心对齐

使用方法

在html页面中添加magnet.min.js

<!-- include script -->
<script src="PATH/TO/magnet.min.js"></script>
<script>
  console.log(window.Magnet); // here it is
</script>

jQuery插件

注意：在包含jquery-magnet.min.js之前，请包括jQuery库

<script src="PATH/TO/jQuery.js"></script>
<script src="PATH/TO/jquery-magnet.min.js"></script>
<script>
  (function($) {
    console.log($.magnet); // here it is
  })(jQuery);
</script>

创建磁组

创建一个磁铁组。添加到组中的所有元素都将应用吸引行为。

let magnet = new Magnet();

jQuery建立新群组

$.magnet(options?)

let options = {
  distance: 15,
  stayInParent: true,
};
let $magnet = $.magnet(options);

添加元素

将HTML元素添加到组中

.add（... DOMs）

magnet.add(document.querySelectorAll('.magnet')); //返回

或在创建组时添加HTML元素

let magnet = new Magnet(document.querySelectorAll('.magnet'));

灵活的添加元素的方式

magnet.add(
  document.querySelectorAll('.magnet'),
  document.querySelectorAll('.other-magnet'),
  document.getElementById('major-magnet')
);

//与上面相同

magnet
  .add(document.querySelectorAll('.magnet'))
  .add(document.querySelectorAll('.other-magnet'))
  .add(document.getElementById('major-magnet'));

jQuery

$magnet.add(…DOMs)

将元素添加到现有组

$.fn.magnet(options?)

将元素添加到新组

let $magnet = $('.magnet').magnet(options);

删除元素

从组中删除HTML元素

.remove(…DOMs)

保持位置被磁铁改变

magnet.remove(document.querySelector('.magnet')); // return this

灵活的删除元素的方法

magnet.remove(
  document.querySelectorAll('.magnet'),
  document.querySelectorAll('.other-magnet'),
  document.getElementById('major-magnet')
);

//与上面相同

magnet
  .remove(document.querySelectorAll('.magnet'))
  .remove(document.querySelectorAll('.other-magnet'))
  .remove(document.getElementById('major-magnet'));

jQuery

$magnet.remove(…DOMs)
$magnet.removeFull(…DOMs)

清除所有元素

从组中删除所有HTML元素

.clear()

保持位置被磁铁改变

magnet.clear();

.clearFull()

移开磁铁改变的位置

magnet.clearFull();

jQuery

$magnet.clear()
$magnet.clearFull()

景点距离

元素吸引同一组其他对象的距离

Default: 0 (px)

.distance(px?)

获取/设置距离

magnet.distance(15); // 设置：单位px，返回
magnet.distance(); // 得到：15

PREVIOUS:
NEXT:
app美食点餐模板
网站常用底部布局代码