快捷導(dǎo)航

前端vue中的拖拽知識(shí)詳解

更新時(shí)間：2025年01月23日 10:04:32 作者：Jinuss

這篇文章主要介紹了前端拖拽功能的基本知識(shí),并詳細(xì)講解了如何在Vue3工程中實(shí)現(xiàn)拖拽指令,拖拽功能涉及HTML、CSS和JavaScript的綜合運(yùn)用,需要的朋友可以參考下

概述

本文主要介紹前端中拖拽相關(guān)的知識(shí)以及如何在 vue3 工程里實(shí)現(xiàn)拖拽指令。

前端中的拖拽

前端中的拖拽功能是一種交互設(shè)計(jì)，允許用戶(hù)通過(guò)鼠標(biāo)或觸摸操作移動(dòng)頁(yè)面上的元素到不同的位置。這一功能的實(shí)現(xiàn)涉及 HTML、CSS 和 JavaScript 的綜合運(yùn)用。

HTML元素拖拽

拖拽元素

HTML 元素有一個(gè)draggable屬性，接受一個(gè)布爾值，默認(rèn)值為false（不可拖拽）。

<div draggable="true">我是可拖動(dòng)的</div>

事件處理

拖拽功能的實(shí)現(xiàn)依賴(lài)于幾個(gè)關(guān)鍵的拖放事件：

dragstart: 當(dāng)用戶(hù)開(kāi)始拖動(dòng)元素時(shí)觸發(fā)，可以在這里設(shè)置數(shù)據(jù)傳輸（如拖動(dòng)的數(shù)據(jù)類(lèi)型和值）。
drag: 元素正在被拖動(dòng)時(shí)連續(xù)觸發(fā)。
dragend: 用戶(hù)釋放鼠標(biāo)，結(jié)束拖動(dòng)時(shí)觸發(fā)。
dragenter 和 dragover: 當(dāng)拖動(dòng)的元素進(jìn)入或停留在目標(biāo)區(qū)域時(shí)觸發(fā)。通常需要阻止這兩個(gè)事件的默認(rèn)行為，以允許元素被放置。
drop: 在拖動(dòng)元素被釋放到有效目標(biāo)時(shí)觸發(fā)，是接收拖動(dòng)數(shù)據(jù)并執(zhí)行相應(yīng)操作的地方。

示例效果

效果如下：

核心代碼

代碼如下：

dragClass.addEventListener("dragstart", (e) => {
  const node = e.target.cloneNode(true);
  e.dataTransfer.setData("cloneNode", node.outerHTML);
});

dragClass.addEventListener("dragend", (e) => {
  e.dataTransfer.clearData();
});

dropDom.addEventListener("dragover", (e) => {
  if (e.target.className == "draggable") {
    e.preventDefault();
  }
});

dropDom.addEventListener("drop", (e) => {
  e.preventDefault();
  const node = e.dataTransfer.getData("cloneNode");
  e.target.innerHTML = node;
  const originCellNode = e.dataTransfer.getData("text/html");
  if (originCellNode) {
    originCellNode.removeChild(originCellNode);
  }
  e.dataTransfer.clearData("cloneNode");
});

dragTableCell.addEventListener("dragstart", (e) => {
  const node = e.target.cloneNode(true);
  e.dataTransfer.setData("cloneNode", node.outerHTML);
  e.dataTransfer.setData("text/html", e.target.parentNode.outerHTML);
});

參考地址

參考地址：https://github.com/Jinuss/blog/blob/main/docs/Demo/03.drag.html

vue3 拖拽指令封裝

在 vue3 中實(shí)現(xiàn)組件的拖拽，可以封裝一個(gè)拖拽指令，再需要進(jìn)行拖拽的組件上加上v-drag即可。

拖拽指令實(shí)現(xiàn)實(shí)現(xiàn)如下：

export const drag = {
  mounted(el) {
    el.style.position = "absolute";
    el.style.cursor = "move";

    let startX, startY, initialX, initialY;

    const dragStart = (e) => {
      startX = e.clientX;
      startY = e.clientY;
      initialX = el.offsetLeft;
      initialY = el.offsetTop;

      document.addEventListener("mousemove", dragMove);
      document.addEventListener("mouseup", dragEnd);
    };

    const dragMove = (e) => {
      const dx = e.clientX - startX;
      const dy = e.clientY - startY;
      const newX = initialX + dx;
      const newY = initialY + dy;

      const maxX = window.innerWidth - el.offsetWidth;
      const maxY = window.innerHeight - el.offsetHeight;

      /**邊界檢查 */
      el.style.left = `${Math.min(Math.max(newX, 0), maxX)}px`;
      el.style.top = `${Math.min(Math.max(newY, 0), maxY)}px`;
    };

    const dragEnd = () => {
      document.removeEventListener("mousemove", dragMove);
      document.removeEventListener("mouseup", dragEnd);
    };

    el.addEventListener("mousedown", dragStart);
  },
};