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;
}
}