js鼠标拖动元素移动

以你之姓@ 2022-01-28 00:13 380阅读 0赞

## 拖动元素移动 ##

var odiv = document.getElementsByTagName('div')[0];
    
        //给需要移动的元素添加onmousedown事件
        odiv.onmousedown = function (ev) {
            var event = window.event || ev;
            // 获取屏幕中可视化的宽高的坐标
            var dx = event.clientX - odiv.offsetLeft; 
            var dy = event.clientY - odiv.offsetTop;
          console.log(event);
          console.log(dy)
            //实时改变目标元素odiv的位置
            document.onmousemove = function (ev) {
                var event = window.event || ev;
                odiv.style.left = event.clientX - dx + 'px';
                odiv.style.top = event.clientY - dy + 'px';
            }
    
            //抬起停止拖动
            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
    
            }
        }

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: /images/20220128/44e19cecee074a69bfd987511f179c62.png

发表评论取消回复

表情：

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

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

相关阅读

相关 js时实现鼠标拖动div

实现js拖动div 实现步骤： 1. 鼠标按下时，标记元素为可拖动状态，并记下鼠标当前位置的偏移； 2. 鼠标开始移动，判断元素状态是否可以拖动，如果是则更新元素位置

清疚/ 2023年07月24日 05:37/ 0 赞/ 7 阅读

相关 js实现鼠标拖动+滚动的小案例

前言：之前练习阴阳师网页时，有如下的效果要实现，答主在网上找了很多教程，最后参考了某一篇博客写出，时间已久，忘记该博客地址。如有侵权，定及时删除！ ![图片在这里][

落日映苍穹つ/ 2022年11月08日 11:24/ 0 赞/ 431 阅读

相关 Propeller.js鼠标拖动旋转jQuery插件

[下载地址][Link 1]Propeller.js是一款jQuery鼠标拖动旋转DOM元素插件。通过该插件，可以使用鼠标拖动旋转页面中的任意DOM元素。 ![1629902

古城微笑少年丶/ 2022年09月08日 11:48/ 0 赞/ 189 阅读

相关鼠标拖动面板

之前写过一篇关于form表单验证随笔，后来添加了一点点内容，使得可以使用鼠标将其拖动，为了完整性，还是写一遍随笔吧；加上这部分内容后，HTML和CSS部分，也进行了少量修改，这

女爷i/ 2022年06月16日 08:28/ 0 赞/ 242 阅读

相关 JS:鼠标移动-伞形特效

效果演示：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F

末蓝、/ 2022年04月16日 03:13/ 0 赞/ 190 阅读

相关 js实现鼠标按下拖动标签

鼠标的事件有很多，这里要用到的是mousedown事件。 > mousedown事件定义和用法： > 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedow

矫情吗；*/ 2022年03月25日 14:36/ 0 赞/ 511 阅读

相关 js鼠标拖动元素移动

拖动元素移动 var odiv = document.getElementsByTagName('div')[0]; //给需要移动的元

以你之姓@/ 2022年01月28日 00:13/ 0 赞/ 381 阅读

相关 js/es6 元素拖动

元素事件：鼠标按下事件/鼠标移动事件/鼠标松开事件元素样式：让元素脱离文档流，采用绝对定位的方式。一、鼠标按下事件当鼠标在元素上面按下时，保存元素的初始偏移量和

朴灿烈づ我的快乐病毒、/ 2021年12月18日 15:11/ 0 赞/ 286 阅读

相关 JS之鼠标事件拖动一个块移动

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8">

系统管理员/ 2021年09月15日 23:06/ 0 赞/ 344 阅读

相关 js 鼠标拖动div

div中心跟踪鼠标动而动得到鼠标坐标，移动时div的左上距离为鼠标两坐标减去div左上顶点到中心的距离 div任意位置随鼠标动而动得到鼠标第一次坐标，移动时div

忘是亡心i/ 2021年07月24日 17:05/ 0 赞/ 472 阅读