记录一下：

<template>
<div class="ChartMation">
<el-row>
<el-col :span="4">
<div class="grid-content bg-Dragination">
<p>字段名称</p>
<div class="col-md-3">
<draggable
class="list-group"
tag="ul"
v-model="list"
v-bind="dragOptions"
:move="onMove"
@start="isDragging=true"
@end="isDragging=false"
>
<transition-group type="transition" :name="'flip-list'">
<li class="list-group-item" v-for="element in list" :key="element.order">
<i
:class="element.fixed? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'"
@click=" element.fixed=! element.fixed"
aria-hidden="true"
></i>
{{element.name}}

</li>
</transition-group>
</draggable>
</div>
</div>
</el-col>
<el-col :span="4">
<div class="grid-content bg-Dragination">
<p>所选字段</p>
<div class="col-md-3">
<draggable element="span" v-model="list2" v-bind="dragOptions" :move="onMove">
<transition-group name="no" class="list-group" tag="ul">
<li class="list-group-item" v-for="element in list2" :key="element.order">
<i
:class="element.fixed? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'"
@click=" element.fixed=! element.fixed"
aria-hidden="true"
></i>
{{element.name}}

</li>
</transition-group>
</draggable>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
components: {
draggable
},
data() {
return {
list: [], //数据库字段列表
list2: [], //拖拽生成的字段列表
//拖拽监听
editable: true,
isDragging: false,
delayedDragging: false,
};
},
methods: {
orderList() {
this.list = this.list.sort((one, two) => {
return one.order - two.order;
});
},
onMove({ relatedContext, draggedContext }) {
this.editable = true;
const relatedElement = relatedContext.element;
const draggedElement = draggedContext.element;
return ((!relatedElement || !relatedElement.fixed) && !draggedElement.fixed);
},
},
computed: {
dragOptions() {
return {
animation: 0,
group: "description",
disabled: !this.editable,
ghostClass: "ghost"
};
},
listString() {
return JSON.stringify(this.list, null, 2);
},
list2String() {
return JSON.stringify(this.list2, null, 2);
}
},
watch: {
isDragging(newValue) {
console.log(this.list2);
if (newValue) {
this.delayedDragging = true;
return;
}
this.$nextTick(() => {
this.delayedDragging = false;
});
}
},

};
</script>
<style lang="stylus" scoped>
.ChartMation {
.el-row {
margin-bottom: 20px;

&:last-child {
  margin-bottom: 0;
}

.el-col {
  margin: 0 10px;
}

}

.el-col {
border-radius: 4px;
}

.bg-purple {
border: 1px solid #67C23A;

p {
  border-bottom: 1px solid #67C23A;
  color: #67C23A;
}

}

.bg-Dragination {
max-height: 700px;
overflow: auto;
border: 1px solid #67C23A;

p {
  border-bottom: 1px solid #67C23A;
  color: #67C23A;
}

div {
  ul, li {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .flip-list-move {
    transition: transform 0.5s;
  }

  .no-move {
    transition: transform 0s;
  }

  .ghost {
    opacity: 0.5;
    background: #c8ebfb;
  }

  .list-group {
    min-height: 20px;
  }

  .list-group-item {
    height: 0.8rem;
    border-bottom: 1px solid #e2e2e2;
    text-align: center;
    line-height: 0.8rem;
    cursor: move;
  }

  .list-group-item i {
    cursor: pointer;
  }
}

}

.bg-Statistics {
border: 1px solid #F56C6C;

p {
  color: #F56C6C;
  border-bottom: 1px solid #F56C6C;
}

div {
  .el-button {
    display: block;
    margin-bottom: 6px;
  }

  .btnClass {
    color: #FFF;
    background-color: #409EFF;
    border-color: #409EFF;
  }
}

}

.bg-Mapping {
border: 1px solid #409eff;

p {
  color: #409eff;
  border-bottom: 1px solid #409eff;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.divcont {
  width: 100%;
  height: 100%;
  display: flex;

  .btnClass {
    color: #FFF;
    background-color: #409EFF;
    border-color: #409EFF;
  }

  ul {
    width: 20%;
    height: 100%;

    li {
      font-size: 17px;
      width: 100%;
      height: 0.68rem;
      line-height: 0.68rem;
      color: #409eff;
      text-align: center;
      cursor: pointer;
      border-bottom: 1px solid #409eff;
    }
  }

  .divfrom {
    border-left: 1px solid #409eff;
    flex: 1;

    .el-tag {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 40px;

      .el-input {
        width: 50%;
      }
    }

    .bottomname {
      height: 40px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
}

}

.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
}
</style>

单纯的只是记录一下自己不懂、不会的地方........