用vue实现H5页面托拽的div(兼容pc与移动端)

最新推荐文章于 2024-05-03 18:31:51 发布
原创 最新推荐文章于 2024-05-03 18:31:51 发布 · 2.7k 阅读 · 16 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#web app #javascript #css #html #vue.js
本文介绍如何在PC端和移动端实现元素的拖拽功能，通过监听鼠标和触摸事件，并结合元素定位属性，使元素能在限定范围内自由移动。

首先看效果图
PC端在这里插入图片描述
移动端在这里插入图片描述
首先实现拖拽需要知道三个事件，按下，移动和抬起
PC端

鼠标按下事件：onmousedown

鼠标移动事件：onmousemove

鼠标抬起事件：onmouseup

移动端

1、当在屏幕上按下手指时触发：touchstart

2、当在屏幕上移动手指时触发：touchmove

3、当在屏幕上抬起手指时触发：touchend

4、touchcancel 当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发
touchcancel。一般会在touchcancel时暂停游戏、存档等操作。

其次知道几个概念
window.outerWidth与window.outerHeight：获得的是加上工具条与滚动条窗口的宽度与高度。
window.innerWidth与window.innerHeight：获得的是可视区域的宽高，但是宽度包含了纵向滚动条的宽度。
document.documentElement.clientWidth与document.documentElement.clientHeight：获得的是屏幕可视区域的宽高，不包括滚动条与工具条，

  • clientY 指的是距离可视页面左上角的距离
  • pageY 指的是距离可视页面左上角的距离(不受页面滚动影响)
  • screenY 指的是距离屏幕左上角的距离
  • layerY 指的是找到它或它父级元素中最近具有定位的左上角距离
  • offsetY 指的是距离它自己左上角的距离

接下来上代码，先绑定PC端的托拽事件

<template>
    <div
        id="app"
        @mousedown="move"
    >
    </div>
</template>
<script>

export default {
    name: "Drag",
    data() {
        return {};
    },
    methods: {
        move(e) {
            e.preventDefault();
            let odiv = e.target; //获取目标元素
            //算出鼠标相对元素的位置
            let disX = e.clientX - odiv.offsetLeft;
            let disY = e.clientY - odiv.offsetTop;
            console.log("x======" + disX, "y======" + disY);
            console.log(
                "offsetLeft======" + odiv.offsetLeft,
                "offsetTop======" + odiv.offsetTop
            );
            console.log(window.innerWidth,window.innerHeight);//可视区域的宽高，但是宽度包含了纵向滚动条的宽度
            console.log(document.documentElement.clientWidth);//可视区域的宽高，但是宽度不包含了纵向滚动条的宽度
            console.log(odiv.offsetWidth, odiv.offsetHeight); //元素宽高
            document.onmousemove = (e) => {
                //鼠标事件
                //鼠标按下并移动的事件
                //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                let left = e.clientX - disX;
                let top = e.clientY - disY;
                if (left < 0) {
                    left = 0;
                }
                if (left >document.documentElement.clientWidth - odiv.offsetWidth) { //如果元素移动宽度超过屏幕可视高度则为屏幕高度
                    left = document.documentElement.clientWidth - odiv.offsetWidth;
                }//判断与左边的距离不能超出屏幕可见区域外
                if (top <0) {
                    top = 0;
                }
                if (top >document.documentElement.clientHeight - odiv.offsetHeight) { //如果元素移动高度超过屏幕可视高度则为屏幕高度
                    top =document.documentElement.clientHeight - odiv.offsetHeight;
                }
                console.log("left======" + left, "top======" + top);

                //移动当前元素
                odiv.style.left = left + "px";
                odiv.style.top = top + "px";
            };
            document.onmouseup = (e) => {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        },
    },
};
</script>
<style lang="scss" scoped>
#app {
    position: absolute; /*定位*/
    top: 30px;
    left: 30px;
    width: 100px;
    height: 100px;
    background: red; /*设置一下背景*/
    z-index: 999;
    cursor: pointer;
}
</style>

移动端的拖拽事件有点特殊，点击元素获取可视左边的位置的方法不是e.clientX而是e.changedTouches[0].pageX
按下、拖动、松开事件也改变了，接下来上代码

<template>
    <div
        id="app"
        @touchstart="touchStart"
        @touchmove="touchMove"
        @touchend="touchEnd"
    >
    </div>
</template>

<script>

export default {
    name: "Drag",
    data() {
        return {
            touchX: 0,//移动端点击时距左边的距离
            touchY: 0,
            odiv: "",
        };
    },
    methods: {
         //手指按下
        touchStart(e) {
            e.preventDefault();
            this.odiv = e.target; //获取目标元素
            //算出鼠标相对元素的位置
            this.touchX = e.changedTouches[0].pageX - this.odiv.offsetLeft;
            this.touchY = e.changedTouches[0].pageY - this.odiv.offsetTop;
            console.log("x======" + this.touchX, "y======" + this.touchY);
            console.log(e);
            console.log(
                "offsetLeft======" + this.odiv.offsetLeft,
                "offsetTop======" + this.odiv.offsetTop
            );
            console.log("innerWidth====="+window.innerWidth,"innerHeight====="+window.innerHeight);
            console.log(this.odiv.offsetWidth, this.odiv.offsetHeight); //元素宽高
        },
        //手指拖动事件
        touchMove(e) {
            //用手指的位置减去手指相对元素的位置，得到元素的位置
            let left = e.changedTouches[0].pageX - this.touchX;
            let top = e.changedTouches[0].pageY - this.touchY;
            console.log("left======" + left, "top======" + top);

             if (left < 0) {
                    left = 0;
                }
                if (left > window.innerWidth - this.odiv.offsetWidth) {
                    left = window.innerWidth - this.odiv.offsetWidth;
                }//可视区域宽度
                if (top < 0) {
                    top = 0;
                }
                if (top >window.innerHeight - this.odiv.offsetHeight) {
                    top = window.innerHeight - this.odiv.offsetHeight;
                }//可视区域高度

            //移动当前元素
            this.odiv.style.left = left + "px";
            this.odiv.style.top = top + "px";
        },
        //手指抬起
        touchEnd() {
           console.log(123)
        },
    },
};
</script>
<style lang="scss" scoped>
#app {
    position: absolute; /*定位*/
    top: 30px;
    left: 30px;
    width: 100px;
    height: 100px;
    background: red; /*设置一下背景*/
    z-index: 999;
}
</style>

TouchEvent事件
在这里插入图片描述

综合起来的代码

<template>
    <div
        id="app"
        @mousedown="move"
        @touchstart="touchStart"
        @touchmove="touchMove"
        @touchend="touchEnd"
    >
    </div>
</template>

<script>

export default {
    name: "Drag",
    data() {
        return {
            touchX: 0,//移动端点击时距左边的距离
            touchY: 0,
            odiv: "",
        };
    },
    methods: {
        move(e) {
            e.preventDefault();
            let odiv = e.target; //获取目标元素
            //算出鼠标相对元素的位置
            let disX = e.clientX - odiv.offsetLeft;
            let disY = e.clientY - odiv.offsetTop;
            console.log("x======" + disX, "y======" + disY);
            console.log(
                "offsetLeft======" + odiv.offsetLeft,
                "offsetTop======" + odiv.offsetTop
            );
            console.log(window.innerWidth,window.innerHeight);//可视区域的宽高，但是宽度包含了纵向滚动条的宽度
            console.log(document.documentElement.clientWidth);//可视区域的宽高，但是宽度不包含了纵向滚动条的宽度
            console.log(odiv.offsetWidth, odiv.offsetHeight); //元素宽高
            document.onmousemove = (e) => {
                //鼠标事件
                //鼠标按下并移动的事件
                //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                let left = e.clientX - disX;
                let top = e.clientY - disY;
                if (left < 0) {
                    left = 0;
                }
                if (left >document.documentElement.clientWidth - odiv.offsetWidth) { //如果元素移动宽度超过屏幕可视高度则为屏幕高度
                    left = document.documentElement.clientWidth - odiv.offsetWidth;
                }//判断与左边的距离不能超出屏幕可见区域外
                if (top <0) {
                    top = 0;
                }
                if (top >document.documentElement.clientHeight - odiv.offsetHeight) { //如果元素移动高度超过屏幕可视高度则为屏幕高度
                    top =document.documentElement.clientHeight - odiv.offsetHeight;
                }
                console.log("left======" + left, "top======" + top);

                //移动当前元素
                odiv.style.left = left + "px";
                odiv.style.top = top + "px";
            };
            document.onmouseup = (e) => {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        },
         //手指按下
        touchStart(e) {
            e.preventDefault();
            this.odiv = e.target; //获取目标元素
            //算出鼠标相对元素的位置
            this.touchX = e.changedTouches[0].pageX - this.odiv.offsetLeft;
            this.touchY = e.changedTouches[0].pageY - this.odiv.offsetTop;
            console.log("x======" + this.touchX, "y======" + this.touchY);
            console.log(e);
            console.log(
                "offsetLeft======" + this.odiv.offsetLeft,
                "offsetTop======" + this.odiv.offsetTop
            );
            console.log("innerWidth====="+window.innerWidth,"innerHeight====="+window.innerHeight);
            console.log(this.odiv.offsetWidth, this.odiv.offsetHeight); //元素宽高
        },
        //手指拖动事件
        touchMove(e) {
            //用手指的位置减去手指相对元素的位置，得到元素的位置
            let left = e.changedTouches[0].pageX - this.touchX;
            let top = e.changedTouches[0].pageY - this.touchY;
            console.log("left======" + left, "top======" + top);

             if (left < 0) {
                    left = 0;
                }
                if (left > window.innerWidth - this.odiv.offsetWidth) {
                    left = window.innerWidth - this.odiv.offsetWidth;
                }
                if (top < 0) {
                    top = 0;
                }
                if (top >window.innerHeight - this.odiv.offsetHeight) {
                    top = window.innerHeight - this.odiv.offsetHeight;
                }

            //移动当前元素
            this.odiv.style.left = left + "px";
            this.odiv.style.top = top + "px";
        },
        //手指抬起
        touchEnd() {
           console.log(123)
        },
    },
};
</script>
<style lang="scss" scoped>
#app {
    position: absolute; /*定位*/
    top: 30px;
    left: 30px;
    width: 100px;
    height: 100px;
    background: red; /*设置一下背景*/
    z-index: 999;
    cursor: pointer;
}
</style>

==========5.20号跟新
上面的版本虽然能实现拖动，但是假如给元素加个比如子元素比如像这样

<template>
    <div
        id="app"
        @mousedown="move"
        @touchstart="touchStart"
        @touchmove="touchMove"
        @touchend="touchEnd"
    >
      <div>
           <h1>
              我爱我的祖国
           </h1>
           <p>请不要点到我了</p>
      </div>
    </div>
</template>

用之前的办法取到的e.target是你点到哪个元素就是哪个元素的dom节点，显然这样是不对的，甚至你点击到子元素会使父元素失效。
那么就要用jq来获取元素节点
修改后的代码

<!--此组件需要传入id则可以使用，传入的拖拽功能需在不同页面上-->
<template>
    <div
        id="app-div"
        @mousedown="move"
        @touchstart="touchStart"
        @touchmove.prevent="touchMove"
        @touchend="touchEnd"
    >
        <slot></slot>//插槽，这里可以放子元素
    </div>
</template>

<script>
export default {
    name: "Drag",
    data() {
        return {
            touchX: 0, //移动端点击时距左边的距离
            touchY: 0,
            odiv: "",
            timer: 0,
        };
    },
    methods: {
        //点击事件
        click() {
        //判断是点击事件还是拖动事件
        },
        move(e) {
            e.stopPropagation(); //阻止事件传播
            // e.preventDefault(); //禁用默认事件，如点击
            let app = document.getElementById(this.id);
            let odiv = app; //获取目标元素
            //算出鼠标相对元素的位置
            let disX = e.clientX - odiv.offsetLeft;
            let disY = e.clientY - odiv.offsetTop;
   
            this.timer = setTimeout(() => {
                this.timer = 0;
                //执行长按事件
            }, 1000);
            document.onmousemove = (e) => {
                //鼠标事件
                //鼠标按下并移动的事件
                //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                let left = e.clientX - disX;
                let top = e.clientY - disY;
                if (left < 0) {
                    left = 0;
                }
                if (
                    left >
                    document.documentElement.clientWidth - odiv.offsetWidth
                ) {
                    //如果元素移动宽度超过屏幕可视高度则为屏幕高度
                    left =
                        document.documentElement.clientWidth - odiv.offsetWidth;
                } //判断与左边的距离不能超出屏幕可见区域外
                if (top < 0) {
                    top = 0;
                }
                if (
                    top >
                    document.documentElement.clientHeight - odiv.offsetHeight
                ) {
                    //如果元素移动高度超过屏幕可视高度则为屏幕高度
                    top =
                        document.documentElement.clientHeight -
                        odiv.offsetHeight;
                }
                // console.log("left======" + left, "top======" + top);

                //移动当前元素
                odiv.style.left = left + "px";
                odiv.style.top = top + "px";
            };
            document.onmouseup = (e) => {
                document.onmousemove = null;
                document.onmouseup = null;
                clearTimeout(this.timer);
                if (this.timer != 0) {
                    //执行单次点击事件
                    this.click();
                }
                return false;
            };

            return false;
        },
        //手指按下
        touchStart(e) {
            // e.preventDefault();   //禁用默认事件比如点击
            e.stopPropagation(); //阻止事件传播
            let app = document.getElementById(this.id);

            this.odiv = app; //获取目标元素
            //算出鼠标相对元素的位置
            this.touchX = e.changedTouches[0].pageX - this.odiv.offsetLeft;
            this.touchY = e.changedTouches[0].pageY - this.odiv.offsetTop;
            this.timer = setTimeout(() => {
                this.timer = 0;
                //执行长按事件
            }, 1000);
            return false;
        },
        //手指拖动事件
        touchMove(e) {
            //用手指的位置减去手指相对元素的位置，得到元素的位置
            let left = e.changedTouches[0].pageX - this.touchX;
            let top = e.changedTouches[0].pageY - this.touchY;
            // console.log( "window.innerWidth==375")
            // console.log(this.odiv.offsetWidth)
            // console.log("left======" + left, "top======" + top);

            if (left < 0) {
                left = 0;
            }
            if (left > window.innerWidth - this.odiv.offsetWidth) {
                left = window.innerWidth - this.odiv.offsetWidth;
            }
            if (top < 0) {
                top = 0;
            }
            if (top > window.innerHeight - this.odiv.offsetHeight) {
                top = window.innerHeight - this.odiv.offsetHeight;
            }

            //移动当前元素
            this.odiv.style.left = left + "px";
            this.odiv.style.top = top + "px";
        },
        //手指抬起
        touchEnd() {
            clearTimeout(this.timer);
            if (this.timer != 0) {
                //执行单次点击事件
                this.click();
            }
            return false;
        },
    },
};
</script>
<style lang="scss" scoped>
#app-div {
    position: absolute; /*绝对定位*/
    //其余样式自己定义
}
</style>
Vue.js实现点击按钮实现div移动动画
TechPulseZ的博客
09-23 927
在上述代码中，当点击按钮时，我们将isMoving变量设置为true，这样Vue.js会自动添加move和move-active类到div元素上，触发动画效果。希望这个示例能够帮助你实现Vue.js中点击按钮实现div移动动画的效果。在Vue.js中，我们可以使用过渡效果和动画来实现div的移动动画。在Vue.js中，我们需要创建一个Vue实例，并在data中定义isMoving变量来控制div的移动状态。现在，当你点击按钮时，div将会以动画的形式从初始位置移动到右侧。
vue实现鼠标拖拽div左右移动的功能
weixin_51747462的博客
09-13 1964
vue实现鼠标拖拽div左右移动的功能
使用vue3 开发H5 ，需要注意的部分点
sepgit的博客
03-16 1508
vue3开发H5，在框架配置、页面编写和js逻辑处理等方面，做到尽可能的一份代码，多端统一呈现。
reset.css
a432qbc的博客
02-24 618
reset.css /** Eric Meyer’s Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) http://cssreset.com */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, e
【Vue H5项目实战】从0到1的自助点餐系统—— 搭建脚手架(Vue3.2 + Vite + TS + Vant + Pinia + Node.js)
白洞，白色的明天在等着我们
07-11 6570
H5 项目基于 Web 技术，可以在智能手机、平板电脑等移动设备上的浏览器中运行，无需下载和安装任何应用程序，且H5 项目的代码和资源可以集中在服务器端进行管理，只需更新服务器上的代码，即可让所有顾客访问到最新的系统版本。本系列将以肯德基自助点餐页面为模板，搭建一款自助点餐系统，第一次开发移动端h5项目，免不了有所差错和不足，欢迎各位大佬指正。Vue3.2 + Vite + TS + Vant + Pinia + Node.js + MongoDB
用vue实现H5页面托拽的div(兼容pc与移动端)_h5移动端拖动效果
2401_84411767的博客
05-03 334
此组件需要传入id则可以使用，传入的拖拽功能需在不同页面上。
Vue+H5如何适配各个移动端？
Amelian的博客
04-05 4559
我们都知道，在做移动端的项目的时候，我们最首先的是要指定适配各种机型的方案，让一套代码能够在不同分辨率的机型下顺应自如。，相信你看完之后将会有很多收货！然后这篇文章主要是讲讲在实际运用上，且也是我在项目中使用的一种适配方案，感兴趣的小伙伴继续看下去吧~ps：若本文有写错或者遗漏的地方还望大家能够底下评论或者私信我，我们一起交流~
创建基于vue的H5
qq_44242030的博客
05-24 5791
技术选型 公司现在需要开发移动端的h5，使用现在比较流行的vue 2.0开发，使用的脚手架是Vant2，网络访问使用的是axios，路由跳转使用的是vue-router，开发工具是vscode， vue cli vue vuex vue中使用axios最详细教程 vue router 环境搭建 引入库 我这里已经安装好了nodejs，并且已经配置好了淘宝镜像 npm config set registry https://registry.npm.taobao.org vscode不能直接在工具里创建项
vue-h5项目总结
m0_74019046的博客
03-31 2015
selections[value].offsetTop - 50 是因为tabber的高度为50，实现tabber的底部滚动到对应的元素的位置，而不是顶部滚动到元素的位置。如果src的值是一个变量，同时有使用了@/asset/img,则变量解析时会直接解析成字符串 @/asset/img，不会转成 …这里的滚动是整个页面的（window）滚动，当页面滚动到底部时再加载数据，而不是监听热门精选区域的滚动，房屋详情监听的是组件的滚动，根据它内部滚动到那个区域，tabber显示激活的状态。
vue 在web项目中写H5页面并适配移动端（记一次笔记）
qq_40429514的博客
06-01 3505
vue 在web项目中写H5页面并适配移动端（记一次笔记）
移动端touch拖动事件和click事件冲突问题解决
小王的技术库
12-14 1186
为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
Vue 搭建移动端 h5 项目步骤
热门推荐
前端开发者
08-04 3万+
Vue 搭建移动端 h5 项目步骤 简介 最近团队里的其他前端小伙伴需要自己搭建移动端 h5 项目，没有整体的思路，于是我就写了这个步骤。 准备阶段 确定项目 ui 框架 现阶段比较好的 Vue 移动端 ui 框架：vant ， vux， cube-ui，Mint-UI，Muse UI，NutUI 等。 选择css预处理样式语言，（vue-cli 里选择） less，sass，stylus都可以，vue-cli 3 后的版本对应的webpack 的loader都是配置好的，只需下载对应的包就好了。使
Vue3（开发h5适配）
qq1195566313的博客
08-27 1万+
在开发移动端的时候需要适配各种机型，有大的，有小的，我们需要一套代码，在不同的分辨率适应各种机型。因此我们需要设置meta标签移动设备具有各种不同的屏幕尺寸和分辨率，例如智能手机和平板电脑。为了提供更好的用户体验，网页需要根据设备的屏幕宽度进行自适应布局。如果不设置，移动设备会按照默认的视口宽度（通常是较宽的桌面屏幕）来渲染网页，导致网页内容在移动设备上显示不正常，可能出现内容被截断或需要水平滚动的情况然后我们实现一个经典的圣杯布局。
【Vue H5项目实战】从0到1的自助点餐系统—— 项目页面布局(Vue3.2 + Vite + TS + Vant + Pinia + Nodejs + MongoDB)
白洞，白色的明天在等着我们
08-12 4695
H5 项目基于 Web 技术，可以在智能手机、平板电脑等移动设备上的浏览器中运行，无需下载和安装任何应用程序，且H5 项目的代码和资源可以集中在服务器端进行管理，只需更新服务器上的代码，即可让所有顾客访问到最新的系统版本。本系列将以肯德基自助点餐页面为模板，搭建一款自助点餐系统，第一次开发移动端h5项目，免不了有所差错和不足，欢迎各位大佬指正。项目代码正在gitee同步更新中，项目地址：https://gitee.com/airheaven/kfg-vue，学习前请大家给个star哦。
「移动端」touch事件，touchEvent对象
前端人的博客
08-25 2492
随着智能手机普及，有越来越多的手机网页和网页版游戏，手机触摸、移动、旋转等等，多种操作。一般电脑的人机交互靠的是鼠标，而手机用的就是触摸。区别有： PC 端一个电脑只能有一个鼠标，而移动端有多点触摸。 PC 端添加效果使用 mouseup、mousedown、mousemove，而移动端使用的 touchstart、touchmove、touchend 。 一、touch事件类型 touchstart - 手指触摸屏幕，在元素上按下时触发 touchmove - 手指移动，在元素上按下之后屏幕上任意
移动端touchmove实现div的拖动拖拽移动效果
qq_62267045的博客
10-10 2978
移动端拖动效果,touchmove的使用，touch事件的示例，网页悬浮窗拖动拖拽移动效果
vue如何实现web端与h5端整合在一起
yinzisang的博客
06-19 2776
如果报错-----无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1，因为在此系统中禁止执行脚本。第四步：在router文件夹里设置h5端的路由和web端的路由，切记在h5main.js和main.js引入对应的路由，我这里h5main.js引入的是h5端的路由。前言：由于已经提前写好web端的系统，h5端与web端展示的内容不一样，所以需要在一套系统里写两版代码，这就需要我们使用webpack打包工具来实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Jet_closer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值