Vue實現移動端拖拽交換位置
阿新 • • 發佈:2020-07-29
本文例項為大家分享了Vue實現移動端拖拽交換位置的具體程式碼,供大家參考,具體內容如下
<template> <div class="imageUploaderPage"> <ul ref='imgList' class="imgList"> <li ref='imgItem' class="imgCoverItem" v-for='(item,index) in filesResults' :key='index' @click="deleteImage(index)" :data-index='index' @touchstart="touchstart($event,item,index)" @touchmove="touchmove($event)" @touchend="touchend($event)" > <img :id="'avarimgs' + index" :src="item"> </li> <li class="imgCoverItem upLoadImageWrapper"> <input ref='upLoadImageFile' id='upLoadImage' type='file' multiple="multiple" accept="image/*" @change="change" /> </li> </ul> <p>點選圖片刪除,拖拽可更改順序,共4張</p> <div class="btnConfimList" v-show="DeleteImageMask"> <div class="btnConfimListMask" @click='setDelete(false)'></div> <transition name="transTop"> <div class="btnConfimListContent"> <ul> <li class="borderT" >刪除該圖片?</li> <li class="borderT" @click='setDelete(true)' style="color: var(--mRed);">刪除</li> </ul> <p class="cancelDeleteImage" @click='setDelete(false)'>取消</p> </div> </transition> </div> </div> </template> <script> export default { data () { return { files: [],fileItem: {},filesResults: [],DeleteImageMask: false,// isShow:false,startX: 0,// 開始觸控的位置 startY: 0,moveX: 0,// 滑動時的位置 moveY: 0,endX: 0,endY: 0,// 結束觸控的位置 disX: 0,// 移動距離 disY: 0,slideEffect: [],// 滑動時的效果 target: null,startIndex: null,zindex: 1,leftW: 0,targetW: 0,clientW: 0,targetX: 0,targetY: 0,allItems: [],targetIndex: null } },// computed: { // toRightW () { return (this.leftW + this.targetW) * (this.startIndex + 1) - this.startX },// toLeftW () { return this.startX - (this.leftW + this.targetW) * this.startIndex },// toTopH () { return this.startY - parseInt(this.startIndex / 4) * (this.topH + this.targetW) },// toBottomH () { return (this.topH + this.targetW) - this.startY + (this.leftW + this.targetW) * (parseInt(this.startIndex / 4)) } // },mounted () { this.$nextTick(() => { this.absoluteItems() }) },watch: { slideEffect (newV) { return newV } },methods: { change (e) { var fileItem = e.target.files let me = this for (let i = e.target.files.length - 1; i >= 0; i--) { var reader = new FileReader() var file = e.target.files[i] reader.onloadstart = function (e) { // console.log('開始讀取....') } reader.onprogress = function (e) { // console.log('正在讀取中....') } reader.onabort = function (e) { // console.log('中斷讀取....') } reader.onerror = function (e) { // console.log('讀取異常....') } reader.onload = function (e) { if (me.filesResults.indexOf(e.target.result) >= 0) { me.$toast('請勿重複上傳') return } if (me.files.length >= 7) { me.$toast('最多上傳4張圖片') return } me.files.unshift(fileItem) me.filesResults.unshift(e.target.result) } reader.readAsDataURL(file) } },absoluteItems () { for (let i = 0; i < 8; i++) { this.allItems = [] } },deleteImage (index) { this.curIndex = index this.DeleteImageMask = true },setDelete (data) { this.DeleteImageMask = false this.curIndex = null data && this.curIndex >= 0 && this.files.splice(this.curIndex,1) && this.filesResults.splice(this.curIndex,1) },touchstart (e,index) { this.startIndex = index this.targetIndex = index this.target = e.target.nodeName.toLowerCase() === 'li' ? e.target : e.target.parentNode !this.leftW && (this.leftW = this.target.parentNode.querySelectorAll('li')[0].getBoundingClientRect().left) !this.topH && (this.topH = this.target.parentNode.querySelectorAll('li')[0].getBoundingClientRect().top) !this.targetW && (this.targetW = this.target.offsetWidth) !this.clientW && (this.clientW = this.leftW + this.targetW) this.zindex++ this.target.style.zIndex = this.zindex this.startX = e.touches[0].clientX this.startY = e.touches[0].clientY },touchmove (ev) { ev = ev || window.event ev.preventDefault() if (ev.touches.length === 1) { this.moveX = ev.touches[0].clientX this.moveY = ev.touches[0].clientY this.disX = this.moveX - this.startX this.disY = this.moveY - this.startY // 邊界處理 this.disY <= 0 && (this.disY = 0) this.disY >= (this.$refs.imgList.offsetHeight - this.clientW) && (this.disY = this.$refs.imgList.offsetHeight - this.clientW) this.target.style.transform = 'translate3d(' + this.disX + 'px,' + this.disY + 'px,0)' this.target.getBoundingClientRect().left <= 0 && (this.target.style.transform = 'translate3d(' + (-this.clientW * this.startIndex) + 'px,0)') this.target.getBoundingClientRect().right >= this.$refs.imgList.offsetWidth && (this.target.style.transform = 'translate3d(' + this.clientW * (3 - this.startIndex) + 'px,0)') for (let i = 0; i < this.filesResults.length; i++) { // && this.moveY > this.$refs.imgItem[i].getBoundingClientRect().top && this.moveY < this.$refs.imgItem[i].getBoundingClientRect().top + this.targetW if (this.moveX >= this.$refs.imgItem[i].getBoundingClientRect().left && this.moveX < this.$refs.imgItem[i].getBoundingClientRect().left + this.targetW && (i !== this.startIndex)) { if (i > this.targetIndex && this.moveX >= this.$refs.imgItem[i].getBoundingClientRect().left && this.moveX < this.$refs.imgItem[i].getBoundingClientRect().left + this.targetW) { if (this.$refs.imgItem[i].style.transform) { if (this.$refs.imgItem[i].style.transform === 'translate3d(0px,0px,0px)') { this.$refs.imgItem[i].style.transform = 'translate3d(' + (-this.clientW) + 'px,0)' this.targetIndex = i } else { this.$refs.imgItem[i].style.transform = 'translate3d(0px,0px)' this.targetIndex = i - 1 } } else { this.$refs.imgItem[i].style.transform = 'translate3d(' + (-this.clientW) + 'px,0)' this.targetIndex = i } } else if (i < this.targetIndex && this.moveX >= this.$refs.imgItem[i].getBoundingClientRect().left && this.moveX < this.$refs.imgItem[i].getBoundingClientRect().left + this.targetW) { if (this.$refs.imgItem[i].style.transform) { if (this.$refs.imgItem[i].style.transform === 'translate3d(0px,0px)') { this.$refs.imgItem[i].style.transform = 'translate3d(' + (this.clientW) + 'px,0px)' this.targetIndex = i + 1 } } else { this.$refs.imgItem[i].style.transform = 'translate3d(' + (this.clientW) + 'px,0)' this.targetIndex = i } } else { this.targetIndex > this.startIndex && (this.targetIndex = i - 1) this.targetIndex < this.startIndex && (this.targetIndex = i + 1) } } } } },touchend (e) { this.target.style.transform = 'translate3d(' + (this.targetIndex - this.startIndex) * (this.leftW + this.targetW) + 'px,' + this.targetY + 'px,0)' let start = this.filesResults.splice(this.startIndex,1)[0] this.filesResults.splice(this.targetIndex,start) for (let i = 0; i < this.filesResults.length; i++) { this.$refs.imgItem[i].style.transform = 'none' } } } } </script> <style lang="less"> .imageUploaderPage{ background: #f0f0f3; color: #a8a8a8; overflow: hidden; p{ text-align: center; color: #a7a7a7; height: 4.07vw; line-height: 4.07vw; font-size: var(--mText); margin-bottom: var(--nText); } .imgList{ padding: 2.78vw 0; font-size: 0; position: relative; .imgCoverItem{ position: relative; width: 23.25vw; height: 23.25vw; border-radius: 1.11vw; display: inline-block; vertical-align: top; overflow: hidden; margin-left: 1.4vw; margin-bottom: 1.4vw; } .upLoadImageWrapper{ position: relative; background: #e0e0e0; #upLoadImage{ position: absolute; outline: none; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } } } } </style>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。