VUE-使用touchstart、touchmove、touchend实现拖拽卡片列表，实现更新排序功能

感谢本文参考地址，原文解析更加清晰如有需要请移步：https://blog.csdn.net/weixin_40400844/article/details/114849253

怕原链接失效，将代码拷贝（如有侵权，请联系删除，感谢！！）

  1 <template>
  2   <div>
  3     <ul>
  4       <li
  5         class="libox"
  6         v-for="(item, index) in list"
  7         :key="index"
  8         :id="'card' + (index + 1)"
  9       >
 10         <div
 11           @touchstart="touchstart($event, item)"
 12           @touchmove="touchMove($event, item)"
 13           @touchend="touchEnd($event, item)"
 14           v-show="item.name !== selectItem.name"
 15         >
 16           {{item.name}}
 17           <svg class="icon svg-icon" aria-hidden="true">
 18             <use :xlink:href="item.icon" rel="external nofollow" ></use>
 19           </svg>
 20         </div>
 21       </li>
 22       <li v-show="selectItem.name" class="selectBox" ref="selectBox">
 23         {{selectItem.name}}
 24         <svg class="icon svg-icon" aria-hidden="true">
 25           <use :xlink:href="selectItem.icon" rel="external nofollow" ></use>
 26         </svg>
 27       </li>
 28     </ul>
 29   </div>
 30 </template>
 31
 32 <script>
 33
 34 export default {
 35   data() {
 36     return {
 37       // 列表数据
 38       list: [
 39         { name: '1', selected: true, icon: '#icon-mianxingbenzivg' },
 40         { name: '2', selected: true, icon: '#icon-mianxingchizi' },
 41         { name: '3', selected: true, icon: '#icon-mianxingdiannao' },
 42         { name: '4', selected: true, icon: '#icon-mianxingdayinji' },
 43         { name: '5', selected: true, icon: '#icon-mianxingdingshuqi' },
 44         { name: '6', selected: true, icon: '#icon-mianxingheiban' },
 45         { name: '7', selected: true, icon: '#icon-mianxinggangbi' },
 46         { name: '8', selected: true, icon: '#icon-mianxingboshimao' },
 47         { name: '9', selected: true, icon: '#icon-mianxingjisuanqi' },
 48         { name: '10', selected: true, icon: '#icon-mianxinghuaxue' },
 49         { name: '11', selected: true, icon: '#icon-mianxingqianbi' },
 50         { name: '12', selected: true, icon: '#icon-mianxingshubao' },
 51         { name: '13', selected: true, icon: '#icon-mianxingshuicaibi' },
 52         { name: '14', selected: true, icon: '#icon-mianxingtushu' },
 53       ],
 54       // 选中元素内容
 55       selectItem: {},
 56       timeOutEvent: 0,
 57       oldNodePos: {
 58         x: 0,
 59         y: 0,
 60       },
 61       oldMousePos: {
 62         x: 0,
 63         y: 0
 64       },
 65       oldIndex: 0,
 66       // 长按标识
 67       longClick: 0
 68     };
 69   },
 70   watch: {
 71     oldIndex(newVal) {
 72       const oldIndex = this.list.findIndex(r=> r.name === this.selectItem.name);
 73       this.list.splice(oldIndex, 1);
 74       this.list.splice(newVal, 0, this.selectItem);
 75     }
 76   },
 77   methods: {
 78     touchstart(ev, item) {
 79       this.longClick = 0;
 80       const that = this;
 81       const selectDom = ev.currentTarget; // div元素
 82       this.timeOutEvent = setTimeout(() => {
 83         that.longClick = 1;
 84         that.selectItem = item;
 85         // 元素初始位置
 86         that.oldNodePos = {
 87           x: selectDom.offsetLeft,
 88           y: selectDom.offsetTop
 89         };
 90         // 鼠标原始位置
 91         that.oldMousePos = {
 92           x: ev.touches[0].pageX,
 93           y: ev.touches[0].pageY
 94         };
 95         const lefts = that.oldMousePos.x - that.oldNodePos.x; // x轴偏移量
 96         const tops = that.oldMousePos.y - that.oldNodePos.y; // y轴偏移量
 97         const { pageX, pageY } = ev.touches[0]; // 手指位置
 98         that.$refs.selectBox.style.left = `${pageX - lefts}px`;
 99         that.$refs.selectBox.style.top = `${pageY - tops}px`;
100       }, 500);
101     },
102     touchMove(ev) {
103       clearTimeout(this.timeOutEvent);
104       const selectDom = ev.currentTarget.parentNode; // li元素
105       if (this.longClick === 1) {
106         const lefts = this.oldMousePos.x - this.oldNodePos.x; // x轴偏移量
107         const tops = this.oldMousePos.y - this.oldNodePos.y; // y轴偏移量
108         const { pageX, pageY } = ev.touches[0]; // 手指位置
109         this.$refs.selectBox.style.left = `${pageX - lefts}px`;
110         this.$refs.selectBox.style.top = `${pageY - tops}px`;
111         this.cardIndex(selectDom, pageX, pageY);
112       }
113     },
114     touchEnd() {
115       clearTimeout(this.timeOutEvent);
116       this.selectItem = {};
117     },
118     /**
119      * 计算当前移动卡片位于卡片的哪一行哪一列
120      */
121     cardIndex(selDom, moveleft, movetop) {
122       const liWid = selDom.clientWidth;
123       const liHei = selDom.clientHeight;
124       const newWidthNum = Math.ceil((moveleft / liWid)); // 哪一列
125       const newHeightNum = Math.ceil((movetop / liHei)); // 哪一行
126       const newPositionNum = (newHeightNum - 1) * 4 + newWidthNum;
127       if (this.oldIndex !== newPositionNum - 1) {
128           if (newPositionNum <= this.list.length) {
129             this.oldIndex = newPositionNum - 1;
130           } else {
131             this.oldIndex = this.list.length - 1;
132           }
133       }
134     }
135   }
136 }
137 </script>
138
139 <style lang="scss" scoped>
140   @mixin myFlexCenter{
141     display: flex;
142     justify-content: center;
143     align-items: center;
144   }
145   ul {
146     width: 100%;
147     height: 100%;
148     display: flex;
149     flex-wrap: wrap;
150     position: relative;
151     overflow: hidden;
152     .libox {
153       width: 25%;
154       height: 100px;
155       border-right: 1px dashed #cccccc;
156       border-bottom: 1px dashed #cccccc;
157       box-sizing: border-box;
158       @include myFlexCenter;
159       >div {
160         width: calc(100% - 10px);
161         height: 75px;
162         border-radius: 18px;
163         @include myFlexCenter;
164         position: relative;
165         &::after {
166             content: '';
167             width: 100%;
168             height: 100%;
169             background: rgba(255, 177, 177, 0.3);
170             position: absolute;
171             top: 0;
172             left: 0;
173         }
174         >svg {
175           width: 75px;
176           height: 75px;
177         }
178       }
179     }
180     .selectBox{
181       position: absolute;
182       width: calc(25% - 10px);
183       height: 75px;
184       border-radius: 18px;
185       >svg {
186         width: 75px;
187         height: 75px;
188       }
189       background-color: rgba(0, 0, 0, 0.1);
190       color:white;
191       @include myFlexCenter;
192       -moz-user-select:none; /*火狐*/
193       -webkit-user-select:none; /*webkit浏览器*/
194       -ms-user-select:none; /*IE10*/
195       -khtml-user-select:none; /*早期浏览器*/
196       user-select:none;
197     }
198   }
199 </style>

存在问题：只能放在卡片上方才能挪动其他卡片位置，未达到需要效果，所以进行了修改。

经实际测试后修改以下部分：

①将下方图片代码修改为（只做了减1的操作）：

1 const newHeightNum = Math.ceil((movetop / liHei)) - 1; // 哪一行

②因为项目未使用scss,所以将css改成如下：

 1 <style  scoped>
 2   ul {
 3     width: 100%;
 4     height: 100%;
 5     display: flex;
 6     flex-wrap: wrap;
 7     position: relative;
 8     overflow: hidden;
 9   }
10   .libox {
11       width: 25%;
12       height: 100px;
13       box-sizing: border-box;
14       display: flex;
15       justify-content: center;
16       align-items: center;
17   }
18   .libox div {
19       width: calc(100% - 10px);
20       height: 75px;
21       border-radius: 18px;
22       display: flex;
23       justify-content: center;
24       align-items: center;
25       flex-direction: column;
26       position: relative;
27     }
28     .selectBox{
29       position: absolute;
30       width: calc(25% - 10px);
31       height: 75px;
32       border-radius: 18px;
33       background-color: inherit;
34       /* color:white; */
35       display: flex;
36       flex-direction: column;
37       justify-content: center;
38       align-items: center;
39       user-select:none;
40     }
41 </style>

效果：