sortablejs----排序插件-CSDN博客

一.Sortable 是什么
Sortable是一个JavaScript库，用于可重新排序的拖放列表
二.特点
1. 支持触摸设备和现代浏览器（包括IE9）
2. 可以从一个列表拖到另一个或在同一个列表拖动
3. 拖动时有CSS动画
4. 支持拖动手柄和可选择的文本
5. 智能的自动滚动条
6. 先进的交换检测
7. 平滑的动画
8. Multi-drag 支持
9. 使用本地HTML5拖放API构建
10. 支持一些CSS库（比如bootstrap）
11. 简单的API
12. 支持插件
13. CDN
14. 不需要jQuery（但支持）
15. 以下这些都支持Sortable
Meteor
Angular 1） 2.0+ 2）1.
React 1）ES2015+ 2）Mixin
Knockout
Polymer
Vue
Ember

三.安装引入

安装
npm install sortablejs --save
引入
import Sortable from 'sortablejs'; 
使用
 1. 获取要拖动的列表元素 （只要能获取到元素即可）
 	  var el = document.querySelectorAll('.container')[0];
      var el = document.getElementsByTagName('ul')[0];
      var el = document.getElementsByClassName('container')[0];
 2. 配置
	var sortable = Sortable.create(el，{配置内容}）

四.部分配置内容

<template>
  <div class="sortable">
    <ul class="container">
      <li class="btnone"> 1 </li>
      <li class="btntwo"> 2 </li>
      <li> 3 </li>
      <li> 4 </li>
      <li> 5 </li>
      <li> 6 </li>
      <li> 7 </li>
      <li> 8 </li>
    </ul>
  </div>
</template>
<script>
import Sortable from 'sortablejs'
export default {
  mounted(){
    this.dragdrop();
  },
  methods:{
    dragdrop(){
      // var el = document.querySelectorAll('.container')[0];
      // var el = document.getElementsByTagName('ul')[0];
      var el = document.getElementsByClassName('container')[0];
      console.log(el);
      var sortable = Sortable.create(el,{
        // 把一个元素在同一个列表拖动或者拖到另一个列表，但前提是必须在一个组group
        // group:'',
        // 可以进行拖拽，但是不会进行排序，依旧可以触发 onChoose,onStart,onEnd,onClone 函数
        // sort:false,
        // 在拖拽过程中会有动画产生
        animation:150,
        easing: "cubic-bezier(1, 0, 0, 1)",
        // 要拖动的目标
        // handle:'.btn',    不清楚和 draggable: '' 有啥不一样
        // 指定不能拖动的元素,多个元素时使用 , 分隔
        filter:'.btnone,.btntwo',
        // 延迟拖拽时间，使得不能立马拖拽，而要长按 500ms 后才能拖拽
        // delay:500,
        // 是否可以进行拖拽排序，为 true 时，不能进行排序，函数不会被触发，为 false 时， 可以进行排序
        disabled: false,
        // 为拖拽时产生的副本添加一个class
        ghostClass:'newclass',
        // 为选中的元素添加一个class
        chosenClass:'addclass',
        // 禁用html5原有的样式
        forceFallback:true,
        // 自定义拖动时的样式
        fallbackClass:'styleli',
        // 被选中时的函数
        onChoose:function(){
          console.log('被选中了');
        },
        // 开始拖动元素的函数
        onStart:function(){
          console.log('开始拖动的函数');
        },
        // 元素拖动结束的函数
        onEnd:function(){
          console.log('拖动结束的函数');
        },
        // 排序发生变化时调用的函数
        onUpdate:function(event){
          console.log('排序发生变化时的函数');
          console.log('~~~~~~~~~~');
          console.log('移动到的列表容器',event.to);
          console.log('来源的列表容器',event.from);
          console.log('被移动的列表单元',event.item);
          console.log('副本的列表单元',event.clone);
          console.log('在列表容器的原序号',event.oldIndex);
          console.log('在列表容器的新序号',event.newIndex);
          console.log('~~~~~~~~~~~');
        },
        //选中被过滤掉的元素时的函数
        onFilter:function(){
          console.log('被 filter 过滤掉的元素');
        },
        // 选中的元素在拖拽过程中调用的函数
        onMove:function(){
          console.log('移动时的函数');
        },
        // 克隆副本时的函数
        onClone:function(){
          console.log('克隆副本时的函数');
        }
      });
    }
  }
}
</script>
<style>
  .container > li {
    list-style: none;
    height: 60px;
    line-height: 60px;
  }
  //副本的样式
  .newclass{
    background-color: pink
  }
  //选中的元素的样式
  .addclass{
     font-size: 28px;
  }
  //拖拽时的样式
  .styleli{
    border: 2px solid hotpink;
  }
</style>

官网链接地址：https://www.npmjs.com/package/sortablejs