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

待我称王封你为后i 2023-02-24 03:53 1阅读 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 条评论，1人围观）

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

相关阅读

相关 Qt实现鼠标拖拽事件

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

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

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

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

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

相关 html5学习(鼠标拖拽)

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

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

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

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

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

相关 html5元素拖拽效果

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

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

相关 html5的元素拖拽

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

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

相关 Jquery实现div拖拽

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

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

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

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

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

相关 python 实现鼠标拖拽

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

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

相关鼠标拖拽效果的实现

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

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