前端面试题84（js如何实现拖拽功能）

最新推荐文章于 2025-04-23 17:21:07 发布

GIS-CL

最新推荐文章于 2025-04-23 17:21:07 发布

阅读量311

点赞数 8

CC 4.0 BY-SA版权

分类专栏：前端面试题文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_46730573/article/details/140530189

前端面试题专栏收录该内容

198 篇文章

订阅专栏

在这里插入图片描述
在JavaScript中实现拖拽功能，我们通常会用到HTML的draggable属性以及一系列的事件监听器来完成这个任务。下面是一个简单的示例，展示了如何让一个元素可拖拽，并且能够限制其拖动范围。

HTML部分

首先，我们需要一个可拖动的元素：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Draggable Demo</title>
<style>
  #draggable {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
  }
</style>
</head>
<body>

<div id="draggable" draggable="true"></div>

<script src="drag.js"></script>
</body>
</html>

JavaScript部分 (`drag.js`)

接下来是JavaScript代码，用于处理拖拽逻辑：

document.addEventListener('DOMContentLoaded', function() {
  var draggable = document.getElementById('draggable');
  
  // 鼠标按下时记录初始位置
  draggable.addEventListener('mousedown', function(e) {
    var offsetX = e.clientX - draggable.offsetLeft;
    var offsetY = e.clientY - draggable.offsetTop;

    // 移动鼠标时调整元素位置
    function onMouseMove(e) {
      var newX = e.clientX - offsetX;
      var newY = e.clientY - offsetY;

      // 限制拖动范围，例如窗口内
      var windowWidth = window.innerWidth;
      var windowHeight = window.innerHeight;
      newX = Math.min(Math.max(0, newX), windowWidth - draggable.offsetWidth);
      newY = Math.min(Math.max(0, newY), windowHeight - draggable.offsetHeight);

      draggable.style.left = newX + 'px';
      draggable.style.top = newY + 'px';
    }

    // 添加鼠标移动和抬起的事件监听器
    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', function() {
      document.removeEventListener('mousemove', onMouseMove);
    });
  });
});

这段代码首先等待文档加载完成，然后为可拖动的元素添加了一个mousedown事件监听器。当鼠标按下时，它记录下鼠标点击位置与元素左上角的偏移量。随后，在mousemove事件中，根据这个偏移量计算元素的新位置，并通过比较限制其在窗口内的拖动范围。最后，在鼠标抬起(mouseup)时，移除mousemove事件监听器，以停止跟踪鼠标移动。

这样就实现了一个基本的、限制在窗口范围内的拖拽功能。