v - for = "resultlists in resultlists" : key = "resultlists.id" class = "list-complete-item" < div class = "list-complete-item-handle" > { { resultlists . name } } < / div > < / div > < / draggable > < / div > < div class = "optionsContent" > < draggable : list = "targetLists" : options = " { group : { name : optionsName , pull : 'clone' } , sort : false , filter = ".undraggable" @end = "optionEnd" class = "dragArea" v - for = "targetList in targetLists" : key = "targetList.id" : class = "{ undraggable: targetList.flag }" class = "list-complete-item" < div class = "list-complete-item-handle2" > { { targetList . name } } < / div > < / div > < / draggable > < / div > < / div > < / div > < / template > < script > import draggable from "vuedraggable" ; export default { name : "DndList" , components : { draggable } , watch : { } , data ( ) { return { optionsName : "article" , disabled : false , resultlists : [ ] , targetLists : [ { id : 1 , name : "平板支撑" } , { id : 2 , name : "俄挺" } , { id : 3 , name : "空中自行车" } , { id : 4 , name : "波比" } , { id : 5 , name : "两头起摸脚" } , { id : 6 , name : "窄距俯卧撑" } , { id : 7 , name : "宽距俯卧撑" } , { id : 8 , name : "钻石俯卧撑" } , { id : 9 , name : "空中击掌俯卧称" } , { id : 10 , name : "深蹲提膝跳" } , computed : { } , methods : { // 右侧拖拽结束事件 optionEnd ( ev ) { // 如果拖拽目标区域和左侧区域的 name 一致，允许拖拽，并改变状态 if ( ev . to . className === "targetCard" ) { this . $set ( this . targetLists [ ev . oldIndex ] , "flag" , true ) ; // 左侧区域开始拖动事件（修改右侧区域的名字，不一致的话拖动失败） targetStart ( ) { this . optionsName = "1111" ; // 拖动结束时，把右侧区域的名字恢复 targetEnd ( ) { this . optionsName = "article" ; < / script > < style lang = "less" scoped > . container { width : 100 % ; height : 100 % ; background - color : rgba ( 5 , 35 , 56 , 0.6 ) ; display : flex ; align - items : center ; justify - content : center ; . content { width : 1200 px ; height : 600 px ; background - color : # 052338 ; // margin: 120px auto auto; display : flex ; . targetContent { width : 100 % ; height : 100 % ; . optionsContent { width : 100 % ; height : 100 % ; border - left : 2 px solid # 4 ab7bd ; . list - complete - item { display : inline - block ; font - size : 16 px ; font - weight : 400 ; color : #ffffff ; padding : 10 px 18 px ; margin : 10 px 8 px 0 ; background : rgba ( 237 , 245 , 255 , 0.1 ) ; border : 1 px solid #bfcbd9 ; border - radius : 0.18 rem ; cursor : pointer ; transition : all 1 s ; . list - complete - item . sortable - chosen { background : # 4 ab7bd ; . list - complete - item . sortable - ghost { background : # 30 b08f ; . undraggable { background - color : rgb ( 143 , 233 , 233 ) ; . list - complete - enter , . list - complete - leave - active { opacity : 0 ; < / style >

@start = "startChange" // 开始拖动元素触发的事件
@end= "endChange" // 拖动元素结束触发的事件
常用属性配置
 
  :options="{
	group: { name: optionsName, pull: 'clone' }, // name 相同的集合子元素可以互相拖动
    sort: false, // 是否禁止拖动排序
    disabled: false, // 如果设置为真，则禁用sortable。
    animation: 150,  // ms, 动画速度运动项目排序时，' 0 ' -没有动画。
    filter: ".ignore-elements",  // 不导致拖拽的选择器(字符串或函数)
    draggable: ".item",  // 指定元素中的哪些项应该是可拖动的。
  	ghostClass: "sortable-ghost",  // 设置拖动元素的class的占位符的类名。
  	chosenClass: "sortable-chosen",  // 设置被选中的元素的class
  	dragClass: "sortable-drag",  //拖动元素的class。
1，拖动的时间元素失去样式
 
 
选项区域和目标区域的元素样式不一致
 
2，拖动失败
 
 
选项区域和目标区域的名字不一致，会导致拖动失败
 
3，控制台报提示（ props is deprecated, add sortable options directly as vue.draggable item, or use v-bind…）
 
 
插件版本问题，:options="{}" 的写法已经被弃用，直接使用 v-bind 写法，具体参照介绍
 
                    项目需求简单实现一个vue拖拽小案例，右侧选项区拖拽到左侧目标区域，拖动成功的不能再次拖动，并改变颜色。安装 vuedraggable  插件cnpm i -S vuedraggable页面直接引用import draggable from “vuedraggable”;…components: { draggable },源码参考<template>  <div class="container">    <div class="conte.