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

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