js drag实现拖拽功能|极客笔记

js drag实现拖拽功能

1. 简介

拖拽功能在网页开发中非常常见，通过拖动元素，使其改变位置或交互，可以提升用户的操作体验。本文将详细介绍如何使用JavaScript实现简单的拖拽功能。

2. 拖拽实现原理

简单来说，拖拽功能的实现原理就是通过鼠标事件实时获取鼠标位置，并将拖动的元素的位置设置为当前鼠标位置减去初始点击位置的偏移量。下面是一个基本的拖拽实现过程:
1. 鼠标按下时，记录初始点击点的位置和被拖动元素的初始位置。
2. 鼠标移动时，计算当前鼠标位置和初始点击点的偏移量，并将被拖动元素的位置设置为鼠标位置减去偏移量。
3. 鼠标松开时，停止拖拽。

3. 实现步骤

根据上述的拖拽实现原理，我们可以按照以下步骤来实现拖拽功能。

3.1 HTML结构准备

首先，我们需要准备一个HTML结构来进行拖拽操作。下面是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>拖拽示例</title>
  <style>
    #dragbox {
      width: 100px;
      height: 100px;
      background-color: #f00;
      position: absolute;
      left: 100px;
      top: 100px;
    }
  </style>
</head>
<body>
  <div id="dragbox"></div>
</body>
</html>

3.2 添加事件监听器

为了实现拖拽功能，需要在JavaScript代码中添加事件监听器。我们需要监听鼠标按下、鼠标移动和鼠标松开这三个事件。

var dragbox = document.getElementById('dragbox');
var offsetX, offsetY;
var isDragging = false;

dragbox.addEventListener('mousedown', function (e) {
  offsetX = e.clientX - dragbox.offsetLeft;
  offsetY = e.clientY - dragbox.offsetTop;
  isDragging = true;
});

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

document.addEventListener('mouseup', function (e) {
  isDragging = false;
});