這篇文章主要為大家展示了vue和H5 draggable如何實(shí)現(xiàn)拖拽并替換效果,內(nèi)容簡(jiǎn)而易懂,希望大家可以學(xué)習(xí)一下,學(xué)習(xí)完之后肯定會(huì)有收獲的,下面讓小編帶大家一起來(lái)看看吧。
創(chuàng)新互聯(lián)堅(jiān)持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:做網(wǎng)站、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時(shí)代的濂溪網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!前言
公司項(xiàng)目需要做拖拽替換效果,本人用的vue框架。在網(wǎng)上找了很多資料都是用的 Vue.Draggable(git地址)。但這個(gè)組件實(shí)現(xiàn)的拖拽后插入效果,我倒騰了很久也沒(méi)有替換效果(如果Vue.Draggable能實(shí)現(xiàn)拖拽替換效果的話請(qǐng)大神給我留言)。
JQ有實(shí)現(xiàn)拖拽的插件,我下載過(guò)一個(gè)插件并看過(guò)源碼,大致原理是給目標(biāo)元素設(shè)置定位屬性,通過(guò)監(jiān)聽鼠標(biāo)mousedown,mouseup事件,再計(jì)算鼠標(biāo)位置變化,然后給元素樣式設(shè)置偏移值來(lái)實(shí)現(xiàn)拖拽效果的。
H5提供了專門的拖拽API 給元素添加 draggable 屬性,設(shè)置為 true就能實(shí)現(xiàn)拖拽了。本文使用的H5提供的拖拽API 以及vue 無(wú)其他任何添加,請(qǐng)放心使用
直接上代碼
<template> <div class="container"> <div class="layout"> <button class="layout-btn" @click="layoutType=val.value" v-for="val in layoutOptions" :key="val.value" >{{val.label}}</button> </div> <div class="group" :class="{'left-top-container': gindex===0, 'right-top-container': gindex===1, 'bottom-container': gindex===2, 'top-container': gindex<2}" v-for="(group,gindex) in data" :key="gindex" > <div class="cls-default" v-for="(item,cindex) in group.children" :key="cindex" :data-id="gindex+'-'+cindex" draggable="true" @dragstart="onDragstart($event)" @dragend="onDragend($event)" @dragover="onDragover($event)" @drop="onDrop($event)" : :class="{'cls1-0': cindex ===0 && layoutType==1, 'cls2-0': (cindex ===0 || cindex ===1) && layoutType==2, 'cls3-0': cindex ===0 && layoutType==3, 'cls3-1': (cindex ===1 || cindex ===2) && layoutType==3, 'cls4-0': cindex <4 && layoutType==4, 'cls6-0': cindex === 0 && layoutType==6 }" > <div class="content">{{item.color ? item.color : '我是空對(duì)象'}}</div> </div> </div> <div class="tips">上面兩個(gè)區(qū)域內(nèi)是展示區(qū)的內(nèi)容能互相拖拽 <br>下面的是資源區(qū),只能復(fù)制出去覆蓋目標(biāo)區(qū)域,本身不會(huì)被替換掉 </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: "視頻播放區(qū)一", children: [ { id: 6, color: "orange" }, { id: 2, color: "yellow" }, {}, {}, {}, {}, { id: 3, color: "cyan" }, {}, { id: 5, color: "brown" } ] }, { group: "right-show", title: "視頻播放區(qū)二", children: [ {}, { id: 7, color: "pink" }, {}, {}, { id: 4, color: "purple" }, {}, {}, {}, { id: 10, color: "gray" } ] }, { group: "source", title: "視頻資源區(qū)", 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]; // 對(duì)數(shù)據(jù)做簡(jiǎn)單的深拷貝 目前不需要 // 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") { //往資源區(qū)拖拽時(shí) 不做任何替換操作 return; } this.data[endGroupIndex].children.splice(endChildIndex, 1, startObj); if (this.data[startGroupIndex].group !== "source") { //拖拽起始區(qū)域不是 source時(shí) 把起始區(qū)域替換成拖拽后區(qū)域的數(shù)據(jù) 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和H5draggable如何實(shí)現(xiàn)拖拽并替換效果-創(chuàng)新互聯(lián)
鏈接地址:http://muchs.cn/article8/cspsop.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供建站公司、軟件開發(fā)、面包屑導(dǎo)航、營(yíng)銷型網(wǎng)站建設(shè)、服務(wù)器托管、App設(shè)計(jì)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容