draggable 拖拽列表排序(指定被拖拽的子元素)

npm i  draggable 
import draggable from 'vuedraggable';

 components: {
    draggable, 
  },
 myArray: [
        {
          id: 0,
          name: 0,
        },
        {
          id: 1,
          name: 1,
        },
]


 <el-scrollbar class="right-scroll"> 
      <draggable @change="draggableChange" animation="1000" handle=".handleclass" v-model="myArray">
        <transition-group>
          <div class="box" v-for="element in myArray" :key="element.id">
            <div class="handleclass" style="height:20px;background:#f00;cursor:move"></div>
            <div>{{element.name}}</div>
          </div >
        </transition-group>
    </draggable>
</el-scrollbar>

handle <example> handle=".handleclass"  选择可拖拽的ele  在.handleclass 这个选择器下的ele可以拖拽 

draggable <example> draggable=".item" 里的.item 指的是可以drag的class选择器

animation动画可单独放入 :animation="100"

chosenClass	:ghostClass="hostClass" 被选中目标的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true

dragClass	:dragClass="dragClass"拖动元素的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true

方法
@start="method" 当开始移动时触发method并返回event含开始位置信息等等
@end="method" 当结束移动时触发method并返回event含开始和结束位置信息等等

.right-scroll{

    height: 500px;

    max-height: 500px;

    >>> .el-scrollbar__wrap {

      overflow-x: hidden;

    }

    .box{

      border-radius:4px ;

      margin: 10px;

      height: 50px;

      // line-height: 50px;

      border: 1px solid #ccc;

      cursor: pointer;

    }

  }