vue实现京东商品秒杀的拖动效果

---

前言

一、自述：

最近在使用vue写一个仿京东的作品。在商品拖动这一方面遇到了一些问题，后来解决了。虽然写的比较死板，但是也算是有自己的思考在里面。所以，写下这篇博客，希望能给大家一些帮助。

大致效果如下:

二、功能实现

这里还是要给大家写详细一点，首先看一下我们需要用到的知识点：

touch事件：//因为我写的是移动端的作品。所以要用到触摸事件
1.touchstart 
2.touchmove

下面看下博主的思路：

1.监听用户刚开始触发的位置，用移动的位置减去刚开始触发的位置。那么就是拖动的距离

2.需要设置中间变量保存上一次拖动离开的位置，不然，下次触发，又会重头开始计算。界面会回到开始位置，而不是你离开后的位置。

代码实现：

1.现在data中写下自己要使用的变量的名字

                    startX:0, // 起点
                    moveX:0, // 移动距离
                    endX:0, // 终点`在这里插入代码片`
                    distanceX:0, // 移动距离
                    stopX:0, // 暂停时距离
                    marginLeft:'', // 距离属性

2.在methods中写拖动方法：

                    dragStart(){ // 开始触发 
                        this.startX = event.touches[0].clientX;  //获取开始触发时候的位置
                    },

                    dragEnd(){ // 结束
                      this.stopX = this.distanceX; // 保存上次的位置
                    }

核心代码：

注意：

博主越界处理这里写的很死。如果大家有好的想法，可以告诉我哦，一起学习。
越界处理主要是拖动的时候，可能会出现拖走商品的时候，当前界面的一部分内容出现空白的情况。

                    dragMove(){ // 移动    
                        this.moveX = event.touches[0].clientX;  // 获取移动后的位置
                        this.distanceX = this.moveX - this.startX + this.stopX;  // 移动距离,注意加上暂停时的距离
                        let secWidth = this.$refs.sec.offsetWidth; // 获取容器宽度
                        if(this.distanceX <= - secWidth / 2){ // 越界处理
                            this.marginLeft = - this.secWidth / 2 +  'px';
                        }else if(this.distanceX >= 0){
                            this.marginLeft = 0;
                        }else{
                            this.marginLeft = this.distanceX + 'px';
                        }
                            
                    },

下面看下标签部分：

                <!-- 秒杀内容 -->
                <div class="seckill-swiper" ref = "sec" @touchstart.stop.prevent = "dragStart()" @touchmove.stop.prevent = "dragMove()"  @touchend.stop.prevent = "dragEnd()" :style = "{marginLeft:marginLeft}">
                    <seckill v-for = "(item,index) in 12" :seckillGoods = "slideData[index]"></seckill>
                </div>

补充：
博主在给元素绑定事件的时候，使用了事件修饰符，目的是为了取消touch自带的原生事件。防止拖动的时候，整个界面跟着一起拖动。

那么，就到这里了，大家有什么好的想法，可以在评论区告诉我啦。