点击滑动替换图片

main.js

@@ -6,6 +6,8 @@ import request from 'common/request.js'
 import './common/icon/iconfont.css'
 import commonjs from 'common/common.js'
 
+
+
 Vue.prototype.$commonjs = commonjs
 Vue.prototype.$request = request
 Vue.prototype.$wxurl = 'https://lx.pangdly.com/#/'

package.json

@@ -12,5 +12,6 @@
   },
   "keywords": [],
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "dependencies": {}
 }

pages/album/photoJigsaw/photoJigsaw.vue

@@ -6,11 +6,11 @@
 			我的相片
 		</view>
 		<!--图片拼图-->
-		<view class="jigsaw-picture">
+		<view class="jigsaw-picture" ref="jigsawPicture">
 			<image class="picture-backgrounImg" src="https://i2.hdslb.com/bfs/archive/bd7dfae552d4ff42e113a5b5a931d4ab2c225388.jpg"></image>
 			<template v-for="(item,index) in pictureJigsawPosition">
-				<view class="picture-position" :key="index" @drop="dropFun(event)" @dragover="allowDrag(event)" :style="{'width': item.width + 'rpx' ,'height': item.height + 'rpx' ,'top': item.top + 'rpx' ,'left': item.left + 'rpx' ,'border-radius': item.radius + 'rpx' ,}">
-					<image :src="item.url" draggable="true" @dragstart="dragFun(event)"></image>
+				<view class="picture-position" :key="index" :style="{'width': item.width + 'rpx' ,'height': item.height + 'rpx' ,'top': item.top + 'rpx' ,'left': item.left + 'rpx' ,'border-radius': item.radius + 'rpx' ,}">
+					<image :src="item.url" @touchstart="handleTouchStart($event,index)" @touchmove="handleTouchMove" @touchend="handleTouchEnd"></image>
 				</view>
 			</template>
 		</view>
@@ -21,6 +21,7 @@
 export default {
   data() {
     return {
+      screenWidth:0,//屏幕宽度
       statusBarHeight: 0,//状态栏高度
       capsule: 0,// 胶囊大小、位置数据
       navHeight: 0,// 导航栏高度
@@ -33,7 +34,7 @@ export default {
           height:'500',
           top:'200',
           left:'24',
-          radius:'50'
+          radius:'50',
         },
         {
           url:'https://i0.hdslb.com/bfs/archive/4d063c42bb8d738f7be5e5a575a6dd19106c1c7d.jpg',
@@ -41,21 +42,29 @@ export default {
           height:'200',
           top:'200',
           left:'340',
-          radius:'8'
+          radius:'8',
         },
         {
           url:'https://img2.baidu.com/it/u=1268701741,4039580892&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500',
           width:'400',
           height:'200',
-          top:'460',
+          top:'560',
           left:'340',
-          radius:'16'
+          radius:'16',
         },
       ],
+			
+      transpositionStartMes:{},
+      transpositionStartIndex:0,
     }
   },
   onLoad(option) {
     this.recordDeviceInfo()//记录设备信息
+    //获取当前view的宽度
+    const query = uni.createSelectorQuery().in(this)
+    query.select('.jigsaw-picture').boundingClientRect(res => {
+      this.screenWidth = res.width
+    }).exec()
   },
   methods: {
     recordDeviceInfo() { //---记录设备信息
@@ -69,20 +78,49 @@ export default {
         delta: 1
       })
     },
-    //图片拖动
-    allowDrag(ev){
-      console.log('123')
-      ev.preventDefault()
+    //基础换位逻辑
+    //1.获取当前位置。确定开始位置的图片值
+    //2.获取终点位置
+    //3.循环终点位置。确实终点位置是否再开始位置，若不在，则将开始位置和终点位置图片互换
+    handleTouchMove(event) {
+    },
+    handleTouchStart(event,index) {//changedTouches[0]  pageX横向 pageY属相
+      this.transpositionStartMes = event.changedTouches[0]
+      this.transpositionStartIndex = index
     },
-    dragFun(ev){
-      console.log('456')
-      ev.dataTransfer.setData('Text',ev.target.id)
+    handleTouchEnd(event) {//点击图片是否切换
+      //距离头部高度 
+      var navHeight = this.pxToRpx(this.albumBoxTop)
+      //获取终点位置
+      var endEvent = event.changedTouches[0]
+      //参数重组  将参数从当前参数转换为 750rpx的数值
+      var newScale = endEvent.pageX/this.screenWidth*750//换算 满宽在哪
+      var newRemain = (endEvent.pageY-navHeight)/this.screenWidth*750//换算 满宽在哪  pageY-navHeight  当前手指位置-导航栏高度 为现在手指再DIV内的高度
+      endEvent.pageX = newScale
+      endEvent.pageY = newRemain
+      //循环是否在某个元素框里面
+      var newInIndex = null
+      this.pictureJigsawPosition.forEach((item,index)=>{
+        var overWidth = parseInt(item.width)+parseInt(item.left)
+        var overHeight = parseInt(item.height)+parseInt(item.top)
+        if(endEvent.pageX>=item.left&&endEvent.pageX<=overWidth&&endEvent.pageY>=item.top&&endEvent.pageY<=overHeight){
+          newInIndex = index
+        }
+      })
+      //确定进入其他元素框内时 图片对换
+      if(this.transpositionStartIndex!==newInIndex&&newInIndex!==null){
+        var indexOne = JSON.parse(JSON.stringify(this.pictureJigsawPosition[this.transpositionStartIndex].url))
+        var indexNew = JSON.parse(JSON.stringify(this.pictureJigsawPosition[newInIndex].url))
+        this.pictureJigsawPosition[this.transpositionStartIndex].url = JSON.parse(JSON.stringify(indexNew))
+        this.pictureJigsawPosition[newInIndex].url = JSON.parse(JSON.stringify(indexOne))
+      }
+			console.log(this.$refs.jigsawPicture)
     },
-    dropFun(ev){
-      console.log('789')
-      ev.preventDefault()
-      var data = ev.dataTransfer.getData('Text')
-      ev.target.appendChild(document.getElementById(data))
+    // px转rpx  将头部导航栏PX转换为RPX
+    pxToRpx(px) {
+      //计算比例
+      let scale = uni.upx2px(100)/100
+      return px/scale
     },
   }
 }
@@ -127,5 +165,13 @@ export default {
 			overflow: auto;
 			position: absolute;
 		}
+		.picture-positionBox{
+			width: 750rpx;
+			height: 1100rpx;
+			position: absolute;
+			top: 0;
+			left: 0;
+		}
 	}
+
 </style>