JavaScript：js实现拖拽，web前端开发流程

在Web前端开发中，实现拖拽功能通常需要监听鼠标事件：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>Draggable Element</title>
<style>
  #draggable {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    cursor: pointer;
  }
</style>
</head>
<body>
 
<div id="draggable"></div>
 
<script>
  const draggable = document.getElementById('draggable');
  let active = false;
  let currentX;
  let currentY;
  let initialX;
  let initialY;
  let xOffset = 0;
  let yOffset = 0;
 
  draggable.addEventListener('mousedown', dragStart, false);
  document.addEventListener('mouseup', dragEnd, false);
  document.addEventListener('mousemove', drag, false);
 
  function dragStart(e) {
    initialX = e.clientX - xOffset;
    initialY = e.clientY - yOffset;
 
    if (e.target === draggable) {
      active = true;
    }
  }
 
  function dragEnd(e) {
    initialX = currentX;
    initialY = currentY;
 
    active = false;
  }
 
  function drag(e) {
    if (active) {
      e.preventDefault();
 
      currentX = e.clientX - initialX;
      currentY = e.clientY - initialY;
 
      xOffset = currentX;
      yOffset = currentY;
 
      setTranslate(currentX, currentY, draggable);
    }
  }
 
  function setTranslate(xPos, yPos, el) {
    el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
  }
</script>
 
</body>
</html>

在这段代码中，我们创建了一个可拖拽的div元素，并为它添加了三个事件监听器：mousedown、mouseup和mousemove。dragStart函数记录鼠标点击的初始位置，dragEnd函数结束拖拽操作，而drag函数在拖拽过程中更新元素的位置。使用transform属性和translate3d函数来实现元素的位置更新，以提升性能。

JavaScript：js实现拖拽，web前端开发流程

评论已关闭

推荐阅读