JS 拖拽|极客笔记

JS 拖拽

在网页开发中，拖拽功能是一种常见的交互方式，用户可以通过拖拽元素来实现拖拽排序、改变位置等操作。而通过JavaScript可以很方便地实现这一功能。本文将详细介绍如何使用JavaScript实现简单的拖拽功能，包括拖拽元素、限制拖拽范围、拖拽释放等操作。

实现基本的拖拽功能

首先，我们来实现一个最基本的拖拽功能。我们需要监听鼠标的mousedown、mousemove和mouseup事件，然后在mousedown事件触发时记录鼠标相对于被拖拽元素的偏移量，随后在mousemove事件触发时更新被拖拽元素的位置，最后在mouseup事件触发时释放拖拽的元素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and Drop</title>
<style>
  .draggable {
    width: 100px;
    height: 100px;
    background-color: #f00;
    position: absolute;
  }
</style>
</head>
<body>
<div class="draggable" id="draggable"></div>
<script>
  const draggable = document.getElementById('draggable');
  let offsetX, offsetY, isDragging = false;

  draggable.addEventListener('mousedown', function(event) {
    isDragging = true;
    offsetX = event.offsetX;
    offsetY = event.offsetY;
  });

  document.addEventListener('mousemove', function(event) {
    if (isDragging) {
      draggable.style.left = event.clientX - offsetX + 'px';
      draggable.style.top = event.clientY - offsetY + 'px';
    }
  });

  document.addEventListener('mouseup', function() {
    isDragging = false;
  });
</script>
</body>
</html>

在上面的代码中，我们创建了一个带有draggable类名的div元素作为可拖拽的元素。当鼠标按下时，记录了鼠标相对于被拖拽元素的偏移量，并设置isDragging为true表示正在拖拽。当鼠标移动时，根据鼠标的位置更新被拖拽元素的位置。当鼠标释放时，将isDragging设置为false表示拖拽结束。

限制拖拽范围

有时候我们希望被拖拽的元素只能在指定的范围内拖动，可以通过限制被拖拽元素的位置来实现这一功能。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and Drop with Constraints</title>
<style>
  .draggable {
    width: 100px;
    height: 100px;
    background-color: #f00;
    position: absolute;
  }
</style>
</head>
<body>
<div class="draggable" id="draggable"></div>
<script>
  const draggable = document.getElementById('draggable');
  let offsetX, offsetY, isDragging = false;

  draggable.addEventListener('mousedown', function(event) {
    isDragging = true;
    offsetX = event.offsetX;
    offsetY = event.offsetY;
  });

  document.addEventListener('mousemove', function(event) {
    if (isDragging) {
      let left = event.clientX - offsetX;
      let top = event.clientY - offsetY;

      // 拖拽范围限制为(0, 0)到(window.innerWidth - 100, window.innerHeight - 100)
      left = Math.min(Math.max(left, 0), window.innerWidth - 100);
      top = Math.min(Math.max(top, 0), window.innerHeight - 100);

      draggable.style.left = left + 'px';
      draggable.style.top = top + 'px';
    }
  });

  document.addEventListener('mouseup', function() {
    isDragging = false;
  });
</script>
</body>
</html>

在上面的代码中，我们通过Math.min和Math.max方法对被拖拽元素的位置进行了限制，确保被拖拽元素不会超出指定的范围。

拖拽释放

有时候我们希望在元素被释放时触发一些操作，比如拖拽结束后改变元素的样式或位置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and Drop with Release Action</title>
<style>
  .draggable {
    width: 100px;
    height: 100px;
    background-color: #f00;
    position: absolute;
  }
</style>
</head>
<body>
<div class="draggable" id="draggable"></div>
<script>
  const draggable = document.getElementById('draggable');
  let offsetX, offsetY, isDragging = false;

  draggable.addEventListener('mousedown', function(event) {
    isDragging = true;
    offsetX = event.offsetX;
    offsetY = event.offsetY;
  });

  document.addEventListener('mousemove', function(event) {
    if (isDragging) {
      draggable.style.left = event.clientX - offsetX + 'px';
      draggable.style.top = event.clientY - offsetY + 'px';
    }
  });

  document.addEventListener('mouseup', function() {
    isDragging = false;
    draggable.style.backgroundColor = '#0f0'; // 拖拽结束后改变背景颜色
  });
</script>
</body>
</html>

在上面的代码中，我们在mouseup事件触发时改变了被拖拽元素的背景颜色，实现在拖拽释放时触发一些操作的效果。

通过以上示例，我们可以看到使用JavaScript实现拖拽功能并不复杂，只需监听鼠标事件并对元素位置进行设置即可实现基本拖拽功能。在实际项目中，我们可以根据需求对拖拽功能进行扩展，比如实现拖拽排序、拖拽放大缩小等更加复杂的功能。