在这里插入图片描述

代码以在jquery中使用为例,包管理工具、cdn引入等其他的形式的使用参考中文文档

<script type="text/javascript" src="/js/tools/draggabilly.min.js"></script>
<button class="flowBtn">
    <image src="/images/flow.png"></image>
</button>
$('.flowBtn').draggabilly({containment:true})

备注:

  • $('.flowBtn').draggabilly()调用这个函数就可以完成拖拽了,但是没有限制范围,元素会被拖到屏外
  • {containment:true}参数接收一个对象,containment为true时默认拖拽范围为父元素内
  • {containment: '.container'} 也可以是css选择器,拖拽范围为 css选择器选中的元素

如果拖拽失败,有可能是拖拽元素的层级不够,给z-index属性值设置大点!!

获取源码打包文件

官方文档:https://draggabilly.desandro.com/

更多推荐