Sortable简单好用的拖拽排序工具

Sortable超简单好用的拖拽排序工具很好的拖拽排序工具,支持原始js,vue ,react,angular,可惜官网访问太慢,将文档整理放博客里,随时访问,https://www.npmjs.com/package/sortablejs特点兼容性好简单原生CSS框架兼容性零依赖SPA支持良好安装安装方法方法npm / yarnnpm install...
摘要由CSDN通过智能技术生成

Sortable超简单好用的拖拽排序工具

很好的拖拽排序工具,支持原始js,vue ,react,angular,可惜官网访问太慢,将文档整理放博客里,随时访问,https://www.npmjs.com/package/sortablejs
特点

  • 兼容性好
  • 简单
  • 原生
  • CSS框架兼容性
  • 零依赖
  • SPA支持良好

安装

安装方法 方法
npm / yarn npm install / yarn add sortablejs --save
bower bower install --save sortablejs
script引入 < script src="…/…/js/Sortable.min.js"></ script >

所有配置项

var sortable = new Sortable(el, {
   
      group: "name",  // or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
      sort: true,  // boolean 定义是否列表单元是否可以在列表容器内进行拖拽排序
      delay: 0, // number 定义鼠标选中列表单元可以开始拖动的延迟时间;
      touchStartThreshold: 0, // px, 在取消延迟的拖动事件之前,该点应该移动多少像素
      disabled: false, // boolean 定义是否此sortable对象是否可用,为true时sortable对象不能拖放排序等功能,为false时为可以进行排序,相当于一个开关;
      store: null,  // @see Store
      animation: 150,  // ms, number 单位:ms,定义排序动画的时间
      easing: "cubic-bezier(1, 0, 0, 1)", // 宽松的动画。默认为空。有关示例,请参见https://easings.net/。
      handle: ".my-handle",  // 格式为简单css选择器的字符串,使列表单元中符合选择器的元素成为拖动的手柄,只有按住拖动手柄才能使列表单元进行拖动
      filter: ".ignore-elements",  // 过滤器,不需要进行拖动的元素
      preventOnFilter: true, //  在触发过滤器`filter`的时候调用`event.preventDefault()`
      draggable: ".item",  // 允许拖拽的项目类名
      ghostClass: "sortable-ghost",  // drop placeholder的css类名
      chosenClass: "sortable-chosen",  // 被选中项的css 类名
      dragClass: "sortable-drag",  // 正在被拖拽中的css类名
      dataIdAttr: 'data-id',
  
      swapThreshold: 1, // 交换区域的阈值
      invertSwap: false, // 如果设置为真,是否总是使用反向交换区
      invertedSwapThreshold: 1, // 反转互换区域的阈值(默认设置为swapThreshold值)
      direction: 'horizontal', // 拖拽方向 (默认情况下会自动判断方向)
  
      forceFallback: false,  // 忽略 HTML5拖拽行为,强制回调进行
  
      fallbackClass
  • 8
    点赞
  • 37
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值