Vue实现移动端拖拽交换位置
作者：jeft_hai
这篇文章主要为大家详细介绍了Vue实现移动端拖拽交换位置，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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, item, 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,' + this.disY + 'px, 0)')
this.target.getBoundingClientRect().right >= this.$refs.imgList.offsetWidth && (this.target.style.transform = 'translate3d(' + this.clientW * (3 - this.startIndex) + 'px,' + this.disY + '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, 0)'
this.targetIndex = i
} else {
this.$refs.imgItem[i].style.transform = 'translate3d(0px, 0px, 0px)'
this.targetIndex = i - 1
}
} else {
this.$refs.imgItem[i].style.transform = 'translate3d(' + (-this.clientW) + 'px, 0, 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, 0px)') {
this.$refs.imgItem[i].style.transform = 'translate3d(' + (this.clientW) + 'px, 0, 0)'
this.targetIndex = i
} else {
this.$refs.imgItem[i].style.transform = 'translate3d(0px, 0px, 0px)'
this.targetIndex = i + 1
}
} else {
this.$refs.imgItem[i].style.transform = 'translate3d(' + (this.clientW) + 'px, 0, 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, 0, 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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。