vue项目中使用vuedraggable

安装 

npm install vuedraggable

 

<template>
  <div class="fluid container">
    <div class="form-group form-group-lg panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">拖拽组件</h3>
      </div>
      <div class="panel-body">
        <div class="checkbox">
          <label><input type="checkbox" v-model="editable">启用拖拽</label>
        </div>
        <button type="button" class="btn btn-default" @click="orderList">恢复初始排序</button>
      </div>
    </div>
	<div class="box">
		<div class="groupBox">
			<div class="col-md-3">
				<!-- 拖拽元素盒子 -->
			  <draggable class="list-group" element="ul" v-model="list" :options="dragOptions" :move="onMove" @start="isDragging=true" @end="isDragging=false">
				<transition-group type="transition" :name="'flip-list'">
				  <li class="list-group-item licommon" 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}}
					<span class="badge">{{element.order}}</span>
				  </li>
				</transition-group>
			  </draggable>
			</div>
		 </div>
		 <div class="groupBox">
			 <div class="col-md-3">
				 <!-- 目标元素盒子 -->
			   <draggable element="span" v-model="list2" :options="dragOptions" :move="onMove">
				 <transition-group name="no" class="list-group targetUl" 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}}
					 <span class="badge">{{element.order}}</span>
				   </li>
				 </transition-group>
			   </draggable>
			 </div>
		 </div>
	</div>
    <div class="arr">
		<!-- 拖拽数组 -->
		<div class="list-group col-md-3 arrcommon">
		  <pre>{{listString}}</pre>
		</div>
		<!-- 目标数组 -->
		<div class="list-group col-md-3 arrcommon">
		  <pre>{{list2String}}</pre>
		</div>
	</div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
const message = [
  "詹姆斯",
  "杜兰特",
  "科比",
  "乔丹"
];

export default {
  name: "hello",
  components: {
    draggable
  },
  data() {
    return {
      list: message.map((name, index) => {
        return { name, order: index + 1, fixed: false };
      }),
      list2: [],
      editable: true,
      isDragging: false,
      delayedDragging: false
    };
  },
  methods: {
	 // 恢复初始排序，已经有拖拽到右边时无法恢复
    orderList() {
      this.list = this.list.sort((one, two) => {
        return one.order - two.order;
      });
    },
    onMove({ relatedContext, draggedContext }) {
	  // 关联元素
      const relatedElement = relatedContext.element;
	  // 拖拽元素
      const draggedElement = draggedContext.element;
	  console.log('拖拽1', relatedElement)
	  console.log('拖拽2', draggedElement)
      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) {
      if (newValue) {
        this.delayedDragging = true;
        return;
      }
      this.$nextTick(() => {
        this.delayedDragging = false;
      });
    }
  }
};
</script>

<style>
.box{
	display:flex;
}
.arr{
	display:flex;
}
.arr .arrcommon{
	width:50%;
	border:1px solid red;
}
.targetUl{
	display:flex;
}
.groupBox{
	border:1px solid #00FFFF;
	width:50%;
}
.groupBox li{
	list-style: none;
	height:30px;
	border:1px solid #eeeeee;
}
.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 {
  cursor: move;
}

.list-group-item i {
  cursor: pointer;
}
</style>