I. what is Sortable
Sortable is a JavaScript library for reordering drag and drop lists
Two. Characteristics
1. Support touch devices and modern browsers (including IE9)
2. You can drag from one list to another or from the same list
3. CSS animation when dragging
4. Support drag handle and optional text
5. Intelligent auto scroll bar
6. Advanced exchange detection
7. Smooth animation
8. Multi drag support
9. Build using local HTML5 drag and drop API
10. Support some CSS libraries (such as bootstrap)
11. Simple API
12. Support Plug-Ins
13. CDN
14. jQuery is not required (but supported)
15. The following support Sortable
Meteor
Angular 1) 2.0+ 2)1.
React 1)ES2015+ 2)Mixin
Knockout
Polymer
Vue
Ember

III. installation and introduction

install
npm install sortablejs --save
 Introduce
import Sortable from 'sortablejs'; 
Use
 1. Get the list elements to drag (as long as you can get the elements)
 	  var el = document.querySelectorAll('.container')[0];
      var el = document.getElementsByTagName('ul')[0];
      var el = document.getElementsByClassName('container')[0];
 2. configuration
	var sortable = Sortable.create(el, {configuration content})

IV. some configuration contents

<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,{
        // Drag or drag an element from the same list to another list, provided it is in a group group
        // group:'',
        // You can drag, but not sort. You can still trigger the onChoose,onStart,onEnd,onClone functions.
        // sort:false,
        // Animation will be generated during dragging
        animation:150,
        easing: "cubic-bezier(1, 0, 0, 1)",
        // Target to drag
        // handle:'.btn', I don't know what's different from draggable: ''
        // Specify elements that cannot be dragged, use when multiple elements, separate
        filter:'.btnone,.btntwo',
        // Delay the dragging time, so that it cannot be dragged immediately, but it can only be dragged after a long press of 500ms
        // delay:500,
        // Drag sorting is allowed. If it is true, it cannot be sorted, and the function will not be triggered. If it is false, it can be sorted.
        disabled: false,
        // Add a class for the copy generated during drag
        ghostClass:'newclass',
        // Add a class for the selected element
        chosenClass:'addclass',
        // Disable the original style of html5
        forceFallback:true,
        // Custom drag style
        fallbackClass:'styleli',
        // Function when selected
        onChoose:function(){
          console.log('Be selected');
        },
        // Function to start dragging elements
        onStart:function(){
          console.log('Function to start dragging');
        },
        // Function at the end of element drag
        onEnd:function(){
          console.log('Drag end function');
        },
        // Function called when sort changes
        onUpdate:function(event){
          console.log('Functions when sorting changes');
          console.log('~~~~~~~~~~');
          console.log('List container to move to',event.to);
          console.log('Source's list container',event.from);
          console.log('List units moved',event.item);
          console.log('List cell of copy',event.clone);
          console.log('The original sequence number of the container in the list',event.oldIndex);
          console.log('New sequence number in list container',event.newIndex);
          console.log('~~~~~~~~~~~');
        },
        //Function when selecting filtered elements
        onFilter:function(){
          console.log('cover filter Filtered elements');
        },
        // The function invoked by the selected element in the drag and drop process.
        onMove:function(){
          console.log('Function on move');
        },
        // Functions when cloning a copy
        onClone:function(){
          console.log('Functions when cloning a copy');
        }
      });
    }
  }
}
</script>
<style>
  .container > li {
    list-style: none;
    height: 60px;
    line-height: 60px;
  }
  //Style of copy
  .newclass{
    background-color: pink
  }
  //The style of the selected element
  .addclass{
     font-size: 28px;
  }
  //Drag style
  .styleli{
    border: 2px solid hotpink;
  }
</style>

Official website link address: https://www.npmjs.com/package/sortablejs