js拖拽功能的实现

最新推荐文章于 2023-11-28 11:58:47 发布

瞌睡凡

最新推荐文章于 2023-11-28 11:58:47 发布

阅读量436

点赞数

分类专栏： js 文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/weixin_61738415/article/details/130246901

版权

js 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #red{
      width:100px;
      height:100px;
      background:red;
      position: absolute;
    }
  </style>
</head>

<body>
  <div id="red"></div>
  <script>
    let red = document.getElementById('red')
    
    red.onmousedown = function (e1){
      red.style.border = '3px solid blue'
      document.onmousemove=function (e2){
        // 当鼠标移动时，将当前鼠标相对视口的坐标赋值给元素的left和top
        // 因为我们需要在按下的位置拖拽，因此我们还需要获取按下键鼠标相对div的左上角位置
        // 使用当前鼠标位置减去这个相对元素的左上角位置，保证鼠标所按位置拖拽
        red.style.left=e2.clientX - e1.offsetX + 'px'
        red.style.top=e2.clientY - e1.offsetY + 'px'
      }
      
      // 当释放鼠标键时，删除鼠标移动事件和删除鼠标释放事件
      document.onmouseup=function(){
        document.onmousemove=null;
        document.onmouseup=null;
        red.style.borderStyle = ''
        red.style.borderColor = ''
        red.style.borderWidth = ''
      }
    }
    
  </script>
    
</body>

</html>

瞌睡凡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js拖拽功能的实现

/ 因为我们需要在按下的位置拖拽，因此我们还需要获取按下键鼠标相对div的左上角位置。// 当鼠标移动时，将当前鼠标相对视口的坐标赋值给元素的left和top。// 使用当前鼠标位置减去这个相对元素的左上角位置，保证鼠标所按位置拖拽。// 当释放鼠标键时，删除鼠标移动事件和删除鼠标释放事件。
复制链接

扫一扫