vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > 前端vue拖拽

前端vue中的拖拽知识详解

作者:Jinuss

这篇文章主要介绍了前端拖拽功能的基本知识,并详细讲解了如何在Vue3工程中实现拖拽指令,拖拽功能涉及HTML、CSS和JavaScript的综合运用,需要的朋友可以参考下

概述

本文主要介绍前端中拖拽相关的知识以及如何在 vue3 工程里实现拖拽指令。

前端中的拖拽

前端中的拖拽功能是一种交互设计,允许用户通过鼠标或触摸操作移动页面上的元素到不同的位置。这一功能的实现涉及 HTMLCSS 和 JavaScript 的综合运用。

HTML元素拖拽

HTML 元素有一个draggable属性,接受一个布尔值,默认值为false(不可拖拽)。

<div draggable="true">我是可拖动的</div>

拖拽功能的实现依赖于几个关键的拖放事件:

示例效果

效果如下:

核心代码

代码如下:

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 中实现组件的拖拽,可以封装一个拖拽指令,再需要进行拖拽的组件上加上v-drag即可。

拖拽指令实现实现如下:

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);
  },
};

总结 

到此这篇关于前端vue中的拖拽知识的文章就介绍到这了,更多相关前端vue拖拽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文