vue拖拽排序 组件

vue拖拽排序 组件

 npm install vuedraggable -S

vue.draggable中文文档

组件代码

<template>
  <div>
    <div class="CmodelType">
      <div class="borderModel">
        <div id="list-demo" class="demo" @dragover="dragover($event)">
          <transition-group name="list" tag="p">
            <div
              v-for="(item, index) in dataList"
              :key="item.id"
              class="list-item"
              draggable="true"
              @dragstart="dragstart(item)"
              @dragenter="dragenter(item, $event)"
              @dragend="dragend(item, $event)"
              @dragover="dragover($event)"
              @click="activeVarClick(index)"
              :class="{ activeCss: activeVar == index }"
            >
              {{ item.label }}
            </div>
          </transition-group>
        </div>
      </div>
      <!-- 上下调整按钮 -->
      <div>
        <div>
          <el-button
            @click="add"
            size="small"
            icon="el-icon-caret-top"
          ></el-button>
        </div>
        <div>
          <el-button
            @click="remove"
            size="small"
            icon="el-icon-caret-bottom"
          ></el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    sortList: {
      type: Array
    }
  },
  data () {
    return {
      oldData: null, // 开始排序时按住的旧数据
      newData: null, // 拖拽过程的数据
      // 列表数据
      dataList: [
        { id: 1, label: '测试一号' },
        { id: 2, label: '测试二号' },
        { id: 3, label: '测试三号' },
        { id: 4, label: '测试四号' }
      ],
      activeVar: null // 高亮选中
    }
  },
  methods: {
    /**
     * 拖拽排序
     */
     //  选中数据向上移动按钮
    add () {
      // 移动到最小位置
      if (this.activeVar != null && this.activeVar !== 0) {
        const acttive = this.dataList.indexOf(this.dataList[this.activeVar])
        const acttiveItem = this.dataList[acttive]
        const newItems = [...this.dataList]
        newItems.splice(acttive, 1)
        newItems.splice(acttive - 1, 0, acttiveItem)
        this.dataList = [...newItems]
        this.activeVar = this.dataList.indexOf(acttiveItem)
      }
    },
     //  选中数据向下移动按钮
    remove () {
      console.log(this.activeVar)
      // 移动到最大位置
      if (this.activeVar != null && this.activeVar <= this.dataList.length) {
        const acttive = this.dataList.indexOf(this.dataList[this.activeVar])
        const acttiveItem = this.dataList[acttive]
        const newItems = [...this.dataList]
        newItems.splice(acttive, 1)
        newItems.splice(acttive + 1, 0, acttiveItem)
        this.dataList = [...newItems]
        this.activeVar = this.dataList.indexOf(acttiveItem)
      }
    },
    activeVarClick (index) {
      this.activeVar = index
    },
    // 属性排序弹窗
    ModelType () {
      // 选中高亮初始化
      this.activeVar = null
      this.dialogVisibleType = true
    },
    // 拖动事件（主要是为了拖动时鼠标光标不变为禁止）
    dragover (e) {
      e.preventDefault()
    },
    // 拖拽最终操作
    dragend (value, e) {
      console.log(value, e)
      if (this.oldData !== this.newData) {
        const oldIndex = this.dataList.indexOf(this.oldData)
        const newIndex = this.dataList.indexOf(this.newData)
        const newItems = [...this.dataList]
        // 高亮选中且移动的节点
        this.activeVar = newIndex
        // 删除老的节点
        newItems.splice(oldIndex, 1)
        // 在列表中目标位置增加新的节点
        newItems.splice(newIndex, 0, this.oldData)
        this.dataList = [...newItems]
      }
    },
    // 记录移动过程中信息
    dragenter (value, e) {
      // console.log(value,e);
      this.newData = value
      e.preventDefault()
      // console.log(this.dataList);
    },
    dragstart (value) {
      console.log(value)
      this.oldData = value
    }
  }
}
</script>
<style scoped>
/* 拖拽排序样式 */
  .CmodelType{
    max-height: 700px;
    display: flex;
  }
  .borderModel{
    width: 450px;
    border: 1px #d9d9d9 solid;
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 700px;
  }
  .list-item {
    display: block;
    /* margin-right: 10px; */
    padding: 10px 10px;
  }
  /* 鼠标放上高亮 */
  .list-item:hover{
    background-color: #F5F5F5;
    cursor:pointer;
  }
  /* 选中后持续高亮 */
  .activeCss{
    background-color: #E6F3FF;
  }
</style>

组件使用

main.js 全局注册

// 全局组件
import dragSort from '@/components/dragSort'
// 全局组件挂载
Vue.component('dragSort', dragSort)

页面使用

<template>
	<div>
		<drag-sort :list="list" @sortList="sortList"></drag-sort>
	</div>
</template>
<script>
export default {
  data(){
    return{
    	// 传递需要排序的数据 自定义排序数据
		list:[],
    }
  },
  mounted(){

  },
  methods:{
  	// 接收排序完成后的数据
	sortList(val){
	}
  }
}
</script>