js鼠标拖动元素移动

以你之姓@ 2022-01-28 00:13 401阅读 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 条评论，401人围观）

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

相关阅读

相关 HTML实现鼠标拖动元素排序

1. 简介拖放（Drag和 drop）是 HTML5 标准的组成部分，为了使元素可拖动，必须把 draggable 属性设置为 true，整个拖拽事件触发的顺序如

短命女/ 2023年10月07日 19:06/ 0 赞/ 56 阅读

相关 wxpython frame鼠标拖动_wxpython用鼠标移动绘制点

我现在用wxpython做一些图像处理工作。我想用鼠标左键向下画一个点，用鼠标移动来移动绘制的点。在下面是我的代码。按左键画点是可以的，但是当我移动鼠标时，先前绘制的点也显

小咪咪/ 2023年10月05日 16:50/ 0 赞/ 13 阅读

相关 js时实现鼠标拖动div

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

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

相关鼠标拖动面板

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

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

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

效果演示：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F

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

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

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

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

相关 js鼠标拖动元素移动

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

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

相关 js/es6 元素拖动

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

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

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

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

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

相关 js 鼠标拖动div

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

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