首页 | 10216 | 646 | 323 | 添加收藏 上一个 下一个
jQuery拖拽插件Magnet.js

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

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