{{item.button_name}} 源码如上 现在用movable-area移动布局是没有移动动画效果 直接出现瞬间移动，使用调试基础库3.4.6真机和模拟器能出现移动动画效果

{{item.button_name}}

drag(e) { if (this.data.flag == false) { return } if (e.detail.source == '') return //如果这个值为空，说明不是手动拖拽的，不要进行下面的操作 // console.log(e.detail); let myindex = e.currentTarget.dataset.myindex //当前拖动的图标的index if (this.data.nowDragIndex !== myindex) { //设置当前拖动的图标 console.log('当前拖动的图标序号为', myindex); this.setData({ nowDragIndex: myindex }) } // e.detail单位是px，需要转为rpx let x = this.pxToRpx(e.detail.x) //转为rpx的x let y = this.pxToRpx(e.detail.y) //转为rpx的y let box = {} let drag = this.data.drag //拖拽部分的变量 宽 高 个数等 box.leftX = x //正在拖动的盒子的左侧x值 box.rightX = x + drag.outWidth / drag.countOneLine //正在拖动的盒子的右侧x值 box.topY = y //正在拖动的盒子的顶部y值 box.bottomY = y + drag.height //正在拖动的盒子的底部y值 //使用for循环判断现在正在哪个位置 - 性能问题，如何防抖？ for (let i = 0; i < this.data.positionList.length; i++) { const element = this.data.positionList[i]; //判断拖拽的盒子，在哪个蓝色模块的位置 if (box.leftX < element.left && box.rightX > element.left && element.boxTop - 20 < box.topY && element.boxBottom + 20 > box.bottomY) { this.setData({ showLine: i }) break } } },

dragEnd(e) { if (this.data.flag == false) { return } let newIndex = this.data.showLine //即将挪动到的位置 let nowDragIndex = this.data.nowDragIndex //原本的位置 console.log(newIndex, nowDragIndex, '1212121') if (newIndex >= 0 && nowDragIndex != newIndex) { //给showline赋值了且不是自己，说明需要变化位置 console.log('需要变化位置'); let newList = this.data.list //改变的是list，而不是页面展示的positionList let item = newList.splice(nowDragIndex, 1) // 删除指定的元素，给item newList.splice(newIndex, 0, item[0]) // 把item添加到指定位置 this.setData({ list: newList, //data的list修改，方便接下来重新计算位置 }) console.log(this.data.list, '新的数组') //然后刷新页面，重新计算position this.countPosition() setTimeout(() => {//使用定时器，防止拖拽到边缘时，无法正常归位（等待边缘动画结束后再回复原位，这个好像是微信小程序这个组件的bug，搜到了三个月前的bug，到现在还没解决） this.setData({ positionList: this.data.positionList, //回复原位 }) console.log(this.data.positionList, 12121) }, 300); } else { console.log('拖了但没完全拖，回复原位'); setTimeout(() => {//使用定时器，防止拖拽到边缘时，无法正常归位（等待边缘动画结束后再回复原位，这个好像是微信小程序这个组件的bug，搜到了三个月前的bug，到现在还没解决） this.setData({ positionList: this.data.positionList, //回复原位 }) console.log(this.data.positionList, 12121) }, 300); } //重置索引 this.setData({ showLine: -1, nowDragIndex: -1, flag: false }) console.log(this.data); },