前言

公司項目需要做拖拽替換效果，本人用的vue框架。在網上找了很多資料都是用的 Vue.Draggable(git地址)。但這個組件實現的拖拽后插入效果，我倒騰了很久也沒有替換效果(如果Vue.Draggable能實現拖拽替換效果的話請大神給我留言)。

JQ有實現拖拽的插件，我下載過一個插件并看過源碼，大致原理是給目標元素設置定位屬性，通過監聽鼠標mousedown，mouseup事件，再計算鼠標位置變化，然后給元素樣式設置偏移值來實現拖拽效果的。

H5提供了專門的拖拽API 給元素添加 draggable 屬性，設置為 true就能實現拖拽了。本文使用的H5提供的拖拽API 以及vue 無其他任何添加，請放心使用

直接上代碼

<template> <div class='container'> <div class='layout'> <button @click='layoutType=val.value' v-for='val in layoutOptions' :key='val.value' >{{val.label}}</button> </div> <div : v-for='(group,gindex) in data' :key='gindex' > <div v-for='(item,cindex) in group.children' :key='cindex' :data- draggable='true' @dragstart='onDragstart($event)' @dragend='onDragend($event)' @dragover='onDragover($event)' @drop='onDrop($event)' : : > <div class='content'>{{item.color ? item.color : ’我是空對象’}}</div> </div> </div> <div class='tips'>上面兩個區域內是展示區的內容能互相拖拽 <br>下面的是資源區，只能復制出去覆蓋目標區域，本身不會被替換掉 </div> </div></template><script>export default { data() { return { stargindex: '', endIndex: '', layoutType: '9', layoutOptions: [ { label: '單分屏', value: 1 }, { label: '二分屏', value: 2 }, { label: '三分屏', value: 3 }, { label: '四分屏', value: 4 }, { label: '六分屏', value: 6 }, { label: '九分屏', value: 9 } ], data: [ { group: 'left-show', title: '視頻播放區一', children: [ { id: 6, color: 'orange' }, { id: 2, color: 'yellow' }, {}, {}, {}, {}, { id: 3, color: 'cyan' }, {}, { id: 5, color: 'brown' } ] }, { group: 'right-show', title: '視頻播放區二', children: [ {}, { id: 7, color: 'pink' }, {}, {}, { id: 4, color: 'purple' }, {}, {}, {}, { id: 10, color: 'gray' } ] }, { group: 'source', title: '視頻資源區', children: [ { id: 11, color: 'white' }, { id: 12, color: 'black' }, { id: 13, color: 'red' }, { id: 14, color: 'green' }, { id: 15, color: 'blue' } ] } ] }; }, methods: { onDragstart(event) { this.stargindex = event.target.getAttribute('data-id'); }, onDragend(event) { let startGroupIndex = this.stargindex.split('-')[0]; let startChildIndex = this.stargindex.split('-')[1]; let endGroupIndex = this.endIndex.split('-')[0]; let endChildIndex = this.endIndex.split('-')[1]; // 對數據做簡單的深拷貝 目前不需要 // let endObj = JSON.parse( // JSON.stringify(this.data[endGroupIndex].children[endChildIndex]) // ); // let startObj = JSON.parse( // JSON.stringify(this.data[startGroupIndex].children[startChildIndex]) // ); let endObj = this.data[endGroupIndex].children[endChildIndex]; let startObj = this.data[startGroupIndex].children[startChildIndex]; if (this.data[endGroupIndex].group === 'source') { //往資源區拖拽時 不做任何替換操作 return; } this.data[endGroupIndex].children.splice(endChildIndex, 1, startObj); if (this.data[startGroupIndex].group !== 'source') { //拖拽起始區域不是 source時 把起始區域替換成拖拽后區域的數據 this.data[startGroupIndex].children.splice(startChildIndex, 1, endObj); } }, onDrop(event) { if (event.target.className.indexOf('cls-default') > -1) { this.endIndex = event.target.getAttribute('data-id'); } else { this.endIndex = event.target.parentElement.getAttribute('data-id'); } }, onDragover(event) { event.preventDefault(); } }};</script><style scoped>.container { background-color: #eee; height: 800px;}.layout .layout-btn { background-color: #409eff; color: #fff; padding: 10px 15px; margin: 10px 15px;}.tips { font-size: 24px; text-align: center;}.group { float: left; overflow: hidden; box-sizing: border-box;}.group-title { height: 40px; line-height: 40px;}.cls-default { float: left; margin: 0; box-sizing: border-box; overflow: hidden; border: 1px solid #999;}.cls-default .content { text-align: center; padding-top: 20px; font-size: 20px;}.top-container { height: 400px; width: 40%; margin: 15px 5%;}.top-container .cls-default { width: 33.33%; height: 33.33%;}.top-container .cls1-0 { width: 100%; height: 100%;}.top-container .cls2-0 { width: 50%; height: 100%;}.top-container .cls3-0 { width: 50%; height: 100%;}.top-container .cls3-1 { width: 50%; height: 50%;}.top-container .cls4-0 { width: 50%; height: 50%;}.top-container .cls6-0 { width: 66.66%; height: 66.65%;}.bottom-container { width: 90%; height: 200px; margin: 15px 5%;}.bottom-container .cls-default { width: 15%; height: 150px;}</style>

寫在最后

本文是我第一次寫博客，寫的比較隨意，樣式處理也是很隨心。如有錯誤請指正。

后面有時間會完善組件的功能。參考Vue.Draggable(git地址)這個組件。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。