[JavaScript]写一个鼠标拖拽元素事件

女爷i 2022-12-08 05:00 183阅读 0赞

<style> div { width: 300px; height: 200px; background-color: pink; position: fixed; /* absolute也可以，目的是使其脱离文档流 */ top: 0; left: 0; } </style>

理解e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY：  
https://blog.csdn.net/qq\_43540219/article/details/108654962

<body>
        <div></div>
    
        <script>
            var divEle = document.getElementsByTagName('div')[0]
            var mouse = { 
                mouseLock: false,
                mouseEleClient: { 
                    t: 0,
                    l: 0
                }
            }
            divEle.onmousedown = function (e) {  //当鼠标在divEle按下时触发事件
                e = e || window.event
                var l = e.clientX
                var t = e.clientY
                mouse.mouseEleClient.t = t - this.offsetTop
                mouse.mouseEleClient.l = l - this.offsetLeft
                mouse.mouseLock = true
            }
            divEle.onmouseup = function (e) {  //当鼠标松开时触发事件
                mouse.mouseLock = false
            }
            window.onmousemove = function (e) {  //当鼠标移动时持续触发
                if (mouse.mouseLock) { 
                    e = e || window.event
                    var l = e.clientX
                    var t = e.clientY
                    console.log(e.clientX)
                    console.log(e.clientY)
                    var divT = t - mouse.mouseEleClient.t
                    var divL = l - mouse.mouseEleClient.l
                    divEle.style.top = divT + 'px'
                    divEle.style.left = divL + 'px'
                }
            }
        </script>
    </body>

发表评论取消回复

表情：

评论列表（有 0 条评论，183人围观）

还没有评论，来说两句吧...

相关阅读

相关前端------拖拽事件

拖拽事件在H5中实现了拖拽技术，允许用户在网页内部拖拽以及浏览器与其他应用程序之间的拖拽，通过拖拽可以传递数据。放置元素:默认是不可以放置得取消默认行为 even

阳光穿透心脏的1/2处/ 2024年04月07日 11:39/ 0 赞/ 97 阅读

相关 Qt实现鼠标拖拽事件

Qt实现鼠标拖拽事件鼠标拖拽是一种常见的用户交互操作，它允许用户通过按下鼠标左键并移动来拖动对象或改变窗口大小。在Qt框架中，我们可以轻松地实现鼠标拖拽事件。本文将介绍如何

骑猪看日落/ 2024年03月09日 03:01/ 0 赞/ 139 阅读

相关 JavaScript ---鼠标拖拽元素问题总结

大致分为三个步骤： 1. 鼠标摁下 onmousedown 2. 鼠标移动 onmousemove 3. 鼠标抬起 onmouseup 注意的一点是 onmousem

淩亂°似流年/ 2023年05月21日 08:41/ 0 赞/ 24 阅读

相关 HTML_如何实现鼠标拖拽div元素

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

待我称王封你为后i/ 2023年02月24日 03:53/ 0 赞/ 23 阅读

相关 JavaScript经典案例：页面元素拖拽

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

小鱼儿/ 2022年12月23日 11:14/ 0 赞/ 228 阅读

相关 [JavaScript]写一个鼠标拖拽元素事件

<style> div { width: 300px; height: 200px; background-color: pink; position: fixed;

女爷i/ 2022年12月08日 05:00/ 0 赞/ 184 阅读

相关 python 实现鼠标拖拽

详细工具见之前写的实现淘宝搜索。 from selenium import webdriver from selenium.webdriver import

一时失言乱红尘/ 2022年05月20日 05:51/ 0 赞/ 315 阅读

相关 JavaScript简单拖拽事件（鼠标跟随事件）

本例演示简单来说分为两步：第一步：鼠标按下时的事件对象操作。第二步：鼠标移动时对事件对象的操作。 <style> \\{margin

骑猪看日落/ 2022年05月11日 05:18/ 0 赞/ 270 阅读

相关 javascript元素拖拽效果的实现

主要涉及三个鼠标事件 mousedown,onmousemove和onmouseup 注意：onmouseup绑定在document对象上，因为释放鼠标时，有可能鼠标不在拖

Dear 丶/ 2021年07月26日 15:38/ 0 赞/ 515 阅读

相关 JavaScript实现鼠标左键拖拽效果

JavaScript实现鼠标左键拖拽效果实现鼠标左键拖拽效果的两种方式

红太狼/ 2020年06月03日 13:28/ 0 赞/ 755 阅读