拖拽移动div(PC端和移动端)

最新推荐文章于 2023-01-04 16:31:49 发布
最新推荐文章于 2023-01-04 16:31:49 发布
阅读量385 收藏
点赞数
分类专栏： JavaScript H5 JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hy3528/article/details/106638192
版权
JavaScript 同时被 3 个专栏收录
37 篇文章 0 订阅
订阅专栏
H5
16 篇文章 0 订阅
订阅专栏
JQuery
16 篇文章 0 订阅
订阅专栏

原生+jq

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Document</title>
    <style>
        #dv {
            width: 100px;
            height: 100px;
            background-color: blue;
            border-radius: 50%;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="dv"></div>
</body>
<script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
<script>
    //获取元素
    var dv = document.getElementById('dv');
    var x = 0;
    var y = 0;
    var l = 0;
    var t = 0;
    var isDown = false;

    // PC 端事件
    // //鼠标按下事件
    // dv.onmousedown = function (e) {
    //     //获取x坐标和y坐标
    //     x = e.clientX;
    //     y = e.clientY;

    //     //获取左部和顶部的偏移量
    //     l = dv.offsetLeft;
    //     t = dv.offsetTop;
    //     //开关打开
    //     isDown = true;
    //     //设置样式  
    //     dv.style.cursor = 'move';
    // }
    // //鼠标移动
    // window.onmousemove = function (e) {
    //     if (isDown == false) {
    //         return;
    //     }
    //     //获取x和y
    //     var nx = e.clientX;
    //     var ny = e.clientY;
    //     //计算移动后的左偏移量和顶部的偏移量
    //     var nl = nx - (x - l);
    //     var nt = ny - (y - t);

    //     dv.style.left = nl + 'px';
    //     dv.style.top = nt + 'px';
    // }
    // //鼠标抬起事件
    // dv.onmouseup = function () {
    //     //开关关闭
    //     isDown = false;
    //     dv.style.cursor = 'default';
    // }

     移动 端事件
    $(document).bind("touchstart", function (e) {
        console.log(e)
        x = e.originalEvent.targetTouches[0].pageX
        y = e.originalEvent.targetTouches[0].pageY

        //获取左部和顶部的偏移量
        l = dv.offsetLeft;
        t = dv.offsetTop;
        //开关打开
        isDown = true;
        //设置样式  
        dv.style.cursor = 'move';
    });
    $(document).bind("touchmove", function (e) {
        if (isDown == false) {
            return;
        }
        //获取x和y
        var nx = e.originalEvent.targetTouches[0].pageX;
        var ny = e.originalEvent.targetTouches[0].pageY;
        //计算移动后的左偏移量和顶部的偏移量
        var nl = nx - (x - l);
        var nt = ny - (y - t);

        dv.style.left = nl + 'px';
        dv.style.top = nt + 'px';
    });
    $(document).bind("touchend", function (e) {
        //开关关闭
        isDown = false;
        dv.style.cursor = 'default';
    });
</script>

</html>

vue写法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/index.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>标题</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        [v-cloak] {
            display: none !important;
        }

        .cont {
            width: 23.4375rem;
            height: 37.5rem;
            background: red;
            position: relative;
            overflow: hidden;
        }

        #dv {
            width: 6.25rem;
            height: 6.25rem;
            background-color: blue;
            border-radius: 50%;
            position: absolute;
        }

        .move {
            cursor: move
        }

        .default {
            cursor: default;
        }
    </style>
</head>

<body>
    <div v-cloak id="Vue">
        <div class="cont">
            <div id="dv" v-bind:class="{ move : isActive, default : isActive2}" v-bind:style="{top:top + 'px',left:left + 'px'}"
                @touchstart="touchstart" @touchmove.prevent="touchmove" @touchend="touchend"></div>
        </div>

    </div>
</body>
<script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/vant.min.js"></script>
<script>
    new Vue({
        el: "#Vue",
        data: {
            isActive: false,
            isActive2: false,
            x:0,
            y:0,
            l:0,
            t:0,
            left: "",
            top: "",
            isDown:false
        },
        created() {
            document.documentElement.style.fontSize = 16 * document.documentElement.clientWidth / 375 + 'px'
            //获取元素
            // PC 端事件
            // //鼠标按下事件
            // dv.onmousedown = function (e) {
            //     //获取x坐标和y坐标
            //     x = e.clientX;
            //     y = e.clientY;

            //     //获取左部和顶部的偏移量
            //     l = dv.offsetLeft;
            //     t = dv.offsetTop;
            //     //开关打开
            //     isDown = true;
            //     //设置样式  
            //     dv.style.cursor = 'move';
            // }
            // //鼠标移动
            // window.onmousemove = function (e) {
            //     if (isDown == false) {
            //         return;
            //     }
            //     //获取x和y
            //     var nx = e.clientX;
            //     var ny = e.clientY;
            //     //计算移动后的左偏移量和顶部的偏移量
            //     var nl = nx - (x - l);
            //     var nt = ny - (y - t);

            //     dv.style.left = nl + 'px';
            //     dv.style.top = nt + 'px';
            // }
            // //鼠标抬起事件
            // dv.onmouseup = function () {
            //     //开关关闭
            //     isDown = false;
            //     dv.style.cursor = 'default';
            // }

            //  移动 端事件
            // $('#dv').bind("touchstart", function (e) {
            //     x = e.originalEvent.targetTouches[0].pageX
            //     y = e.originalEvent.targetTouches[0].pageY

            //     //获取左部和顶部的偏移量
            //     l = dv.offsetLeft;
            //     t = dv.offsetTop;
            //     //开关打开
            //     isDown = true;
            //     //设置样式  
            //     dv.style.cursor = 'move';
            // });
            // $('#dv').bind("touchmove", function (e) {
            //     if (isDown == false) {
            //         return;
            //     }
            //     console.log(e.originalEvent.targetTouches[0].pageX, e.originalEvent.targetTouches[0].pageY, "坐标")
            //     //获取x和y
            //     var nx = e.originalEvent.targetTouches[0].pageX;
            //     var ny = e.originalEvent.targetTouches[0].pageY;
            //     //计算移动后的左偏移量和顶部的偏移量
            //     var nl = nx - (x - l);
            //     var nt = ny - (y - t);
            //     if (e.originalEvent.targetTouches[0].pageY <= 600 && e.originalEvent.targetTouches[0].pageX <= 375 && e.originalEvent.targetTouches[0].pageY > 0 && e.originalEvent.targetTouches[0].pageX > 0) {
            //         dv.style.left = nl + 'px';
            //         dv.style.top = nt + 'px';
            //     }
            // });
            // $('#dv').bind("touchend", function (e) {
            //     //开关关闭
            //     isDown = false;
            //     dv.style.cursor = 'default';
            // });
            //     let that = this
            // $.ajax({
            //     type: "get",	//请求方式
            //     async: false,
            //     url: "",
            //     data: {},		//传值给后台
            //     dataType: "json",
            //     success: (res) => {
            //         console.log(res)
            //
            //     },
            // });
        },
        methods: {
            touchstart(e) {
                this.x = e.changedTouches[0].pageX
                this.y = e.changedTouches[0].pageY
                //获取左部和顶部的偏移量
                this.l = this.left;
                this.t = this.top;
                //开关打开
                this.isDown = true;
                //设置样式  
                this.isActive = true
                // dv.style.cursor = 'move';
            },
            touchmove(e) {
                if (this.isDown == false) {
                    return;
                }
                //获取x和y
                var nx = e.changedTouches[0].pageX;
                var ny = e.changedTouches[0].pageY;
                //计算移动后的左偏移量和顶部的偏移量
                var nl = nx - (this.x - this.l);
                var nt = ny - (this.y - this.t);
                if (e.changedTouches[0].pageY <= 600 && e.changedTouches[0].pageX <= 375 && e.changedTouches[0].pageY > 0 && e.changedTouches[0].pageX > 0) {
                    this.left = nl;
                    this.top = nt;
                }
            },
            touchend(e) {
                //开关关闭
                this.isDown = false;
                this.isActive = false
                this.isActive2 = true
            }
        }
    })
</script>

</html>
hy3528
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
npm 可视化html编辑器,超给力 Vue.js 可视化H5拖拽编辑器Quark-H5
weixin_42250528的博客
06-05 1036
前两天有分享一个鲁班H5移动端页面生成器。今天再给大家推荐一款超优秀的Vue H5可视化布局编辑器QuarkH5。quark-h5基于 vue.js 开源的H5可视化拖放编辑器，star高达1.7K+。支持拖拽组件并配置属性，支持动画及效果预览，轻松快速上手制作h5页面。技术栈Vue2.x + Vuex + Vue-RouterElement-UI饿了么pc组件库Sass css预设编译器Loa...
js实现一个可以兼容PC端和移动端的div拖动效果实例
10-20
主要介绍了js实现一个可以兼容PC端和移动端的div拖动效果实例，具有一定的参考价值，有需要的可以了解一下。
PC端、移动端拖拽元素
bluelotos893的博客
11-12 496
PC端、移动端拖拽元素
PC实现div可拖拽
Reap as one has sown的博客
04-25 276
 var left, top, $this;          $(document).delegate('.modal-dialog', 'mousedown', function (e) {              left = e.clientX, top = e.clientY, $this = $(this).css('cursor', 'move');              th...
Vue实现移动端拖拽交换位置
10-15
主要为大家详细介绍了Vue实现移动端拖拽交换位置，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue-draggable-div：vue可拖拽可伸缩的组件
02-13
Vue可拖动的div 说明 vue可拖拽可伸缩的组件，目前只是上方，详见以下传送门 安装 npm install vue-draggable-div 使用 [removed] import VueDraggableDiv from 'vue-draggable-div' ... components: {VueDraggableDiv} 需要使用样式样式时，导入“ vue-draggable-div / dist / vue-draggable-div.css” 任选属性及触发事件 道具： 可拖动的 descibe：是否可拖拽 类型：布尔型 要求：假 默认值：true < vue xss=removed> 可调整大小 descibe：是否可缩放 类型：布尔型 要求：假 默认值：true < vue-draggable-di
vuejs移动端实现div拖拽移动
10-16
Vue.js 移动端实现div拖拽移动是一个常见的交互需求，尤其在开发移动应用或页面时，例如创建可拖动的悬浮窗口。本教程将详细讲解如何利用Vue.js框架来实现这一功能，主要涉及的事件处理包括触摸开始(`touchstart`)、...
JS实现点击拉拽轮播图pc端移动端适配
10-18
在本文中，我们将探讨如何使用JavaScript（JS）来实现一个点击和拉拽的轮播图，使其同时适应PC端和移动端。轮播图是网页设计中常见的一种元素，用于展示多张图片或内容，通常带有自动播放、左右切换等功能。在移动...
纯CSS实现隐藏滚动条但仍具有滚动的效果（移动端和pc端）
01-19
PC 端对兼容性的要求相对来说要高一点，所有可以换一种方法，大致思路就是在内容div外面包一个父容器div，设置 overflow: hidden，内容div设置 display-x: hidden; display-y: auto; 最后设置父容器div的宽度小于...
解决拖拽有内容的div的bug和兼容问题
weixin_30793643的博客
12-03 144
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #big { height: 800px; width: 800px...
js面向对象封装拖拽移动功能，兼容pc和移动端
11-04
采用JavaScript面向对象思想封装拖拽移动功能，兼容pc端和移动端，适合JavaScript初学者进阶学习。
前端项目中常用的工具包（拖拽排序表格、打印导出表格、文本复制等）【持续更新~~~】
渣渣旭的博客
09-01 2575
表格类： vxe-table[开源的多功能表格] 简介 一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等… 码云地址 官方API 官方带示例的API sortable[功能强大的JavaScript 拖拽库] 简介： Sortable.js是一款优秀的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery。支持 Me
写一个简单基于vue的拖拽插件并发布到npm。
wkq_1212的博客
08-21 463
目的： 1.任何元素，只需要插入v-drag即可拖动， 2.可根据自定义属性控制结束拖动后是否吸附最近的墙面（屏幕边界） 3.可根据自定义属性来判断pc与移动端，分别执行mouse事件和touch事件 首先声明一个对象，并拥有install方法，然后将其暴露出去。不多解释，官方文档已经很明确了。 const VDrag = {} VDrag.install = function (Vue) { } export default VDrag Vue参数是被use调用时传入Vue实例，我们的目标是
拖动和调整div大小vue-draggable-resizable组件
S筱潇S四维Smile
01-04 2698
拖动和调整div大小vue-draggable-resizable组件
vue项目中做div拖动互换位置
qq_40076219的博客
11-15 2818
使用场景。VUE项目中的元素拖拽。后台管理系统的首页图表中比较常见 效果图： div的拖拽互换位置 插件vuedraggable（版本：^2.23.2）；vue-cli（版本：2x） 使用步骤: 第一步：下载 npm(cnpm) install vuedraggable --save 第二步：引入，注册。 在你要使用拖拽元素互换位置的地方引入依赖。并将其注册为组件 ![引入和注册](https:/...
js实现可拖拽的div
weixin_34377065的博客
03-18 341
实现一个div可以被拖拽，代码如下所示： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;zzw_drap&lt;/title&gt; &lt;style&gt;
vue实现鼠标拖拽div滚动效果-vue-dragscroll（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
06-11 3268
vue实现鼠标拖拽div滚动效果-vue-dragscroll
draggabilly一款功能强大的拖动拖拽元素插件
weixin_34190136的博客
01-20 691
draggabilly一款功能强大的拖动拖拽元素插件:http://download.csdn.net/detail/cometwo/9411895 支持移动触摸设备的纯js元素拖放插件 :http://download.csdn.net/detail/cometwo/9411907 ：“` <hea...
js实现简单的拖拽功能，pc端拖拽和app拖拽有哪些区别？
tianjian_zhou的博客
12-15 814
最近做的手机端应用，客户尽然出现那种将手机字体调到最大，然后一个功能的入口按钮就看不到了的情况；然后就出现了拖拽功能... 这里是一个非常简单的实现方法（没有考虑太多因素，只是实现）； ![在这里插入图片描述](https://img-blog.csdnimg.cn/20181215193703388.png?x-oss-process=image/watermark,type_ZmFuZ3poZ...
js实现同时兼容pc和移动端的元素拖拽功能
最新发布
05-24
要实现同时兼容 PC 端和移动端的元素拖拽功能，可以使用 HTML5 新增的 drag 事件和 touch 事件。 首先，需要将元素设置为可拖拽，可以使用 draggable 属性。例如： ```html <div draggable="true">可拖拽的元素</...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值