原生JS实现鼠标按下拖拽效果

最新推荐文章于 2024-04-30 16:57:21 发布
最新推荐文章于 2024-04-30 16:57:21 发布
阅读量2.5k 收藏 4
点赞数 2
分类专栏： 原生JS 文章标签： javascript html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/york_ice/article/details/84567625
版权

原生JS实现鼠标按下拖拽效果

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>鼠标拖动</title>
    <style type="text/css">
        body {
            margin: 0;
        }

        div {
            width: 200px;
            height: 200px;
            position: absolute;
            background-color: pink;
        }
    </style>
</head>

<body>

    <div onmousedown="downDiv(this)" onmousemove="moveDiv(this)" onmouseup="upDiv(this)">

    </div>



    <script>
        //定义变量储存div的宽高
        var obj_w, obj_h;
        //定义一个变量判断是否执行移动函数
        var mouseDown = false;

        //鼠标按下函数
        function downDiv(obj) {
            //获取div的宽高
            obj_w = obj.offsetWidth;
            obj_h = obj.offsetHeight;
            //鼠标
            var e = event || window.event;
            //e.clientX/Y 是获取鼠标相对浏览器的位置；将div中心自动居中到鼠标
            obj.style.left = (e.clientX - obj_w / 2) + "px";
            obj.style.top = (e.clientY - obj_h / 2) + "px";
            console.log(obj.style.left, obj.style.top)
            //按下时为ture,松开时为false，以判断是否执行执行mouveDiv
            mouseDown = true;

        }

        //鼠标移动函数
        function moveDiv(obj) {
            obj_w = obj.offsetWidth;
            obj_h = obj.offsetHeight;
            var e = event || window.event;
            console.log(e.clientX, e.clientY);
            console.log(obj_w, obj_h);
            if (mouseDown) {
                obj.style.left = (e.clientX - obj_w / 2) + "px";
                obj.style.top = (e.clientY - obj_h / 2) + "px";
                console.log(obj.style.left, obj.style.top)
            }

        }

        //鼠标松开函数
        function upDiv(obj) {
            mouseDown = false;
        }

    </script>
</body>

</html>
York_Ice
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js按住鼠标左键方框选中效果
09-22
原生js按住鼠标左键方框选中效果
原生JS-鼠标拖动
Dormiveglia-flx的博客
10-10 999
/ 1. 给被拖拽的div加上 onmousedown 鼠标【按下事件】。//结束的位置，减去鼠标点下的位置，那么得到的位置，就是div落下的位置。// 三. 全局监听鼠标的抬起事件。//记录鼠标点下的位置。// 2. div按下后，全局监听鼠标【移动事件】。//这里还需要加上 div当前的位置， 累加。// 2. 鼠标移动，div跟着移动。// 鼠标按下的时候，开始监听鼠标的移动。// 鼠标移动后，给div赋值。// 3. 全局监听鼠标【抬起事件】。// 二. 全局监听鼠标的移动事件。
js 鼠标按下并移动事件
water_Popcorn的博客
07-28 3129
鼠标按下并移动事件
js鼠标拖动事件
lirunhui6的博客
04-23 7406
第一步，定义被拖放的元素为绝对定位或者相对定位第二部，清楚几个坐标的概念：按下鼠标时指针坐标（event.pageX和event.pageY）,松开鼠标时指针坐标，拖放元素的原始坐标，拖放后元素的坐标&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title..
用js编写,鼠标拖拽特效。
m0_53911328的博客
04-27 1302
盒子的位置（left和top值）= 鼠标的位置（left和top值）- 鼠标按下时与盒子之间的距离（left和top值）。 编写HTML，设计弹框用于实现拖拽特效。 为拖拽条添加mousedown事件及其处理程序。 处理鼠标移动事件，实现鼠标的拖拽的特效。 处理释放鼠标按键的事件，实现鼠标按钮松开后，弹框不再移动。 css页面代码： <style> *{ margin: 0; padding: 0; ...
js实现‘按住鼠标’的滑块拖动效果
二次猿的博客
10-18 8501
js实现‘按住鼠标’的滑块拖动效果
原生js实现鼠标按下鼠标拉动元素移动效果
蛋蛋老公的博客
06-08 1572
原生js实现鼠标按下鼠标拉动元素移动效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width,
JS实现鼠标按下拖拽效果
11-20
原生JS实现鼠标按下拖拽效果，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
原生js实现拖拽移动与缩放效果
11-19
本文实例为大家分享了js实现拖拽移动与缩放效果的具体代码，供大家参考，具体内容如下 效果图如下-实现了简单的拖拽和缩放功能 第一步—简单的拖拽功能 // 创建一个MoveClass构造函数 function MoveClass(id, ...
原生JS实现拖拽效果
01-18
本文实例为大家分享了JS实现拖拽效果的具体代码，供大家参考，具体内容如下 想要让整个元素移动需要三个事件： 鼠标按下 onmousedown 鼠标移动 onmousemove 鼠标抬起 onmouseup html <!-- 点击title拖拽 --...
JavaScript实现的多种鼠标拖放效果
10-23
主要介绍了JavaScript实现的多种鼠标拖放效果,涉及JavaScript响应鼠标事件动态变换页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
原生js实现拖拽功能基本思路详解
10-18
主要介绍了原生js实现拖拽功能基本思路详解,而拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。需要的朋友可以参考下
JavaScript实现拖拽功能
xiaoba_598的博客
06-02 2626
盒子拖拽 &amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;html&amp;amp;amp;gt; &amp;amp;amp;lt;head lang=&amp;amp;quot;en&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;meta charset=&amp;amp;quot;UTF-8
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 638
步骤很详细，直接上教程……
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 734
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
bpmn-js推荐几款常用的插件
最新发布
飞云先生
04-30 23
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
用Typescript写自动化工作流
联蔚盘云的博客
04-29 875
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。
前端Vue2项目搭建过程
xuemen11的博客
04-25 1203
vue2,vuex,vant组件库
[email protected]使用懒加载
weixin_44072254的博客
04-25 206
【代码】[email protected]使用懒加载。
原生js实现拖拽div
08-07
### 回答1： 我可以提供一些指引：要实现拖拽div，你首先需要监听div的mousedown，mouseup和mousemove事件。然后记录鼠标的坐标，并通过改变div的CSS left和top属性来实现div的拖拽。 ### 回答2： 原生 JavaScript 可以使用一些事件和方法来实现拖拽 div 的功能。以下是一个简单的示例： 首先，在 HTML 中添加一个可拖拽的 div 元素： ``` <div id="draggableDiv" draggable="true">可拖拽的 div</div> ``` 在 JavaScript 中，我们可以通过监听一些事件来实现拖拽的效果。首先，我们需要监听 div 的 mousedown 事件，当鼠标按下时开始拖拽。然后，我们需要监听鼠标移动事件来更新 div 的位置。最后，在鼠标抬起时停止拖拽。 ``` const draggableDiv = document.getElementById('draggableDiv'); let offsetX, offsetY; draggableDiv.addEventListener('mousedown', (event) => { offsetX = event.clientX - draggableDiv.offsetLeft; offsetY = event.clientY - draggableDiv.offsetTop; document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); }); function onMouseMove(event) { draggableDiv.style.left = event.clientX - offsetX + 'px'; draggableDiv.style.top = event.clientY - offsetY + 'px'; } function onMouseUp() { document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); } ``` 在上面的代码中，我们通过计算鼠标点击位置与 div 左上角的偏移量，然后通过监听鼠标移动事件来更新 div 的位置。鼠标移动事件会不断触发，从而使得 div 跟随鼠标的移动而移动。最后，当鼠标抬起时，我们需要移除事件监听，停止拖拽。 通过以上代码，我们就可以实现一个简单的原生 JavaScript 拖拽 div 的效果。当鼠标按下 div 并移动时，div 会跟随鼠标的移动而移动，当鼠标抬起时停止拖拽。 ### 回答3： 要实现拖拽div的效果，可以使用原生JavaScript来完成。具体步骤如下： 1. 首先，在HTML中创建一个div元素，并给它设置一个id，用于后续的选择和操作。 ```html <div id="dragDiv">拖拽我</div> ``` 2. 在JavaScript中，创建一个变量来保存当前被拖拽的div元素。 ```javascript var dragElement = document.getElementById("dragDiv"); ``` 3. 添加mousedown事件监听器，当鼠标按下时，开始拖拽。 ```javascript dragElement.addEventListener("mousedown", dragStart); ``` 4. 在dragStart函数中，记录鼠标按下时的初始位置和div元素的初始位置。 ```javascript function dragStart(event) { event.preventDefault(); startX = event.clientX; startY = event.clientY; elementX = dragElement.offsetLeft; elementY = dragElement.offsetTop; document.addEventListener("mousemove", drag); document.addEventListener("mouseup", dragEnd); } ``` 5. 创建drag函数，在该函数中，根据鼠标移动的距离，更新div元素的位置。 ```javascript function drag(event) { var moveX = event.clientX - startX; var moveY = event.clientY - startY; dragElement.style.left = elementX + moveX + "px"; dragElement.style.top = elementY + moveY + "px"; } ``` 6. 创建dragEnd函数，在该函数中，移除鼠标移动和松开事件监听器。 ```javascript function dragEnd() { document.removeEventListener("mousemove", drag); document.removeEventListener("mouseup", dragEnd); } ``` 通过以上步骤，我们就可以实现一个简单的原生JavaScript拖拽div效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值