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

待我称王封你为后i 2023-02-24 03:53 22阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]  
代码如下：

<style> body{ margin: 0; padding: 0; } div{ position: absolute; top: 200px;/*div的y轴*/ left: 150px;/*div的x轴*/ width: 300px; height: 200px; background-color: red; } div:hover{ cursor: move; } </style>
    
        <script> /* * 分析： * 获取鼠标实时移动的坐标；m_move_x,m_move_y * 鼠标按下时的坐标；m_down_x,m_down_y * div的坐标；dx,dy * 鼠标按下时，鼠标与div的偏移量；md_x,md_y * div的新坐标；ndx,ndy */ var isDown = false;//记录鼠标状态 var move_div ;//要操作的div对象 var m_move_x,m_move_y,m_down_x,m_down_y,dx,dy,md_x,md_y,ndx,ndy; //鼠标按下 function down(){ move_div = document.getElementById("move_div"); isDown = true; //获取鼠标按下时坐标 m_down_x = event.pageX; m_down_y = event.pageY; //获取div坐标 dx = move_div.offsetLeft; dy = move_div.offsetTop; //获取鼠标与div偏移量 md_x = m_down_x - dx; md_y = m_down_y - dy; } //鼠标移动 function move(){ move_div = document.getElementById("move_div"); //实时更新div的坐标 dx = move_div.offsetLeft; dy = move_div.offsetTop; //获取鼠标移动实时坐标 m_move_x = event.pageX; m_move_y = event.pageY; //鼠标按下时移动才触发 if(isDown){ //获取新div坐标，鼠标实时坐标 - 鼠标与div的偏移量 ndx = m_move_x - md_x; ndy = m_move_y - md_y; //把新div坐标值赋给div对象 move_div.style.left = ndx+"px"; move_div.style.top = ndy+"px"; } } //鼠标释放 function up(){ isDown = false; } </script>
    
    </head>
    <body>
    
        <div id="move_div" onmousedown="down()" onmouseup="up()" onmousemove="move()"></div>
    
    </body>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]: /images/20230209/3fae29290ab849628e9575ea1911d60c.png

发表评论取消回复

表情：

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

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

相关阅读

相关拖拽div

被拖拽元素需要绝对定位。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

怼烎@/ 2023年10月06日 15:32/ 0 赞/ 66 阅读

相关 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 阅读

相关 html5学习(鼠标拖拽)

> html5鼠标拖拽的效果和案例温故知新，许久之前写的html5的案例，重新整理了下，算是知识复习和回顾吧！ ![watermark_type_ZmFuZ3poZW

曾经终败给现在/ 2022年12月31日 01:26/ 0 赞/ 218 阅读

相关 html5元素拖拽效果

html5元素拖拽效果的实现需要借助js，分为4个步骤，代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti

谁践踏了优雅/ 2022年08月08日 19:52/ 0 赞/ 276 阅读

相关 html5的元素拖拽

html5不仅新增了很多新标签（Element，比如canvas、math、video等等），也新增了很多新属性（Attribute），本章主要来介绍一下元素拖拽所使用的一系列

Dear 丶/ 2022年06月16日 05:45/ 0 赞/ 372 阅读

相关 Jquery实现div拖拽

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR

ゞ浴缸里的玫瑰/ 2022年06月08日 06:05/ 0 赞/ 247 阅读

相关原生js鼠标拖拽div左右滑动

![2018041314472714][] ![20180413144737216][] <!DOCTYPE html> <html lang="en">

一时失言乱红尘/ 2022年05月27日 06:54/ 0 赞/ 267 阅读

相关 python 实现鼠标拖拽

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

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

相关鼠标拖拽效果的实现

我所说的“鼠标拖拽效果”是指，鼠标在某个图标上按下，然后拖动，图标随着鼠标移动；这个效果的实现依赖控件的三个事件：Mouse\_Down,Mouse\_Move,Mouse\_

「爱情、让人受尽委屈。」/ 2021年11月10日 13:24/ 0 赞/ 509 阅读