拖拽元素无需代码的万千妙用

前端

2022-11-26 02:34:41

元素拖拽：提升用户体验的利器

想象一下， 在一个拥有拖拽功能的网站中，你能轻松地拖动元素，随心所欲地调整它们的位置和大小，为你带来前所未有的便捷和愉悦的用户体验。这就是拖拽技术的魅力所在。

拖拽的核心原理

拖拽的核心在于利用鼠标事件。当鼠标按下元素时，便会捕获该元素；鼠标移动时，元素随之移动；鼠标抬起时，元素则被释放。

拖拽的核心示意图

鼠标按下元素： 按下元素时，将其捕获并显示一个半透明的反馈层。
鼠标移动元素： 移动鼠标时，元素位置随之更新，反馈层实时跟随。
鼠标抬起元素： 鼠标抬起时，释放元素，隐藏反馈层。

拖拽的关键技术

1. 鼠标按下事件

在元素上添加鼠标按下事件监听器，捕获元素并显示反馈层：

element.addEventListener("mousedown", function(e) {
  // 捕获元素
  capturedElement = e.target;

  // 显示反馈层
  feedbackLayer.style.display = "block";

  // 更新反馈层位置
  updateFeedbackLayerPosition(e.clientX, e.clientY);
});

2. 鼠标移动事件

在文档上添加鼠标移动事件监听器，移动元素并更新反馈层位置：

document.addEventListener("mousemove", function(e) {
  // 移动元素
  capturedElement.style.left = e.clientX - elementOffsetLeft + "px";
  capturedElement.style.top = e.clientY - elementOffsetTop + "px";

  // 更新反馈层位置
  updateFeedbackLayerPosition(e.clientX, e.clientY);
});

3. 鼠标抬起事件

在文档上添加鼠标抬起事件监听器，释放元素并隐藏反馈层：

document.addEventListener("mouseup", function(e) {
  // 释放元素
  capturedElement = null;

  // 隐藏反馈层
  feedbackLayer.style.display = "none";
});

限制移动区域

为了防止元素超出可视区域，需要限制其移动范围。

在可视区域内限制移动

// 获取可视区域宽高
const visibleWidth = document.documentElement.clientWidth;
const visibleHeight = document.documentElement.clientHeight;

// 计算元素偏移量
const elementOffsetLeft = element.getBoundingClientRect().left;
const elementOffsetTop = element.getBoundingClientRect().top;

// 计算元素宽高
const elementWidth = element.offsetWidth;
const elementHeight = element.offsetHeight;

// 计算元素可移动区域
const movableAreaWidth = visibleWidth - elementWidth - elementOffsetLeft;
const movableAreaHeight = visibleHeight - elementHeight - elementOffsetTop;

// 限制元素移动
element.style.left = Math.min(Math.max(0, e.clientX - elementOffsetLeft), movableAreaWidth) + "px";
element.style.top = Math.min(Math.max(0, e.clientY - elementOffsetTop), movableAreaHeight) + "px";

在指定区域内限制移动

如果需要在特定区域内拖拽元素，则需计算该区域内的可移动范围：

// 获取可移动区域宽高
const movableAreaWidth = movableArea.offsetWidth;
const movableAreaHeight = movableArea.offsetHeight;

// 计算元素偏移量
const elementOffsetLeft = element.getBoundingClientRect().left;
const elementOffsetTop = element.getBoundingClientRect().top;

// 计算元素宽高
const elementWidth = element.offsetWidth;
const elementHeight = element.offsetHeight;

// 计算元素可移动区域
const movableAreaWidth = movableAreaWidth - elementWidth - elementOffsetLeft;
const movableAreaHeight = movableAreaHeight - elementHeight - elementOffsetTop;

// 限制元素移动
element.style.left = Math.min(Math.max(0, e.clientX - elementOffsetLeft), movableAreaWidth) + "px";
element.style.top = Math.min(Math.max(0, e.clientY - elementOffsetTop), movableAreaHeight) + "px";

性能优化

使用 requestAnimationFrame() 函数可以提高拖拽性能，流畅更新反馈层位置：

let animationFrameId = null;

function updateFeedbackLayerPosition(clientX, clientY) {
  if (animationFrameId) {
    cancelAnimationFrame(animationFrameId);
  }

  animationFrameId = requestAnimationFrame(() => {
    feedbackLayer.style.left = clientX - elementOffsetLeft + "px";
    feedbackLayer.style.top = clientY - elementOffsetTop + "px";
  });
}