Vue3實現(xiàn)可視化拖拽標簽小程序功能

更新時間：2023年09月04日 15:01:08 作者：飯一口口吃

這篇文章主要介紹了Vue3實現(xiàn)可視化拖拽標簽小程序,實現(xiàn)功能可視化標簽拖拽，雙擊標簽可修改標簽內(nèi)容，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下

介紹

在這里插入圖片描述

實現(xiàn)功能：可視化標簽拖拽，雙擊標簽可修改標簽內(nèi)容

HTML結(jié)構(gòu)

<div class="box" v-move>
  <div class="header">標簽1</div>
  <div @dblclick="startEditing" v-if="!isEditing">{{content}}</div>
  <input type="text" v-model="editedContent" @blur = 'stopEditing' v-if="isEditing">
</div>

一個大DIV包含里面存放兩個DIV一個input
header為頭部標簽名稱
內(nèi)容區(qū)域綁定雙擊鼠標事件，觸發(fā)開始修改事件（startEditing），使用v-if進行標簽的顯示和隱藏操作
input標簽，事件綁定為修改內(nèi)容，綁定獲取焦點事件（@blue=“stopEditing”），并且綁定和內(nèi)容區(qū)域一樣的變量用來控制顯示隱藏，一方為顯示另一方必定為隱藏

TS部分

import { Directive, DirectiveBinding } from "vue";
const vMove: Directive<any, void> = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    // 創(chuàng)建一個變量 moveElement，表示 DOM 元素的子元素（假設(shè)這是要拖動的元素）
    const moveElement: HTMLDivElement = el.firstElementChild as HTMLDivElement;
    // 鼠標按下事件處理函數(shù)
    const mouseDown = (e: MouseEvent) => {
      // 計算鼠標相對于元素的偏移量
      const X = e.clientX - el.offsetLeft;
      const Y = e.clientY - el.offsetTop;
      // 鼠標移動事件處理函數(shù)
      const move = (e: MouseEvent) => {
        // 更新元素的位置，實現(xiàn)拖動效果
        el.style.left = e.clientX - X + "px";
        el.style.top = e.clientY - Y + "px";
      };
      // 添加鼠標移動事件監(jiān)聽器
      document.addEventListener("mousemove", move);
      // 添加鼠標松開事件監(jiān)聽器，用于停止拖動
      document.addEventListener("mouseup", () => {
        document.removeEventListener("mousemove", move);
      });
    };
    // 將鼠標按下事件處理函數(shù)添加到元素上
    moveElement.addEventListener("mousedown", mouseDown);
  },
};

采用自定義指令進行設(shè)置移動組件，Directive 和 DirectiveBinding：這是Vue.js中用于自定義指令的一些類型和功能。自定義指令允許你在DOM元素上附加自定義行為。Directive 是自定義指令的基本類型，而 DirectiveBinding 是與指令綁定的數(shù)據(jù)的類型。

上述代碼定義了一個名為 vMove 的自定義指令，它會在元素上附加拖動行為。當鼠標在 moveElement（元素的子元素）上按下時，啟動拖動操作，通過鼠標移動事件更新元素的位置，并在鼠標松開時停止拖動。這個自定義指令可以在Vue.js應(yīng)用中使用，將其添加到需要拖動的元素上，以實現(xiàn)拖拽功能。

<script setup lang="ts">
// 導(dǎo)入 Vue 和自定義指令相關(guān)的模塊
import { ref, Directive, DirectiveBinding } from "vue";
// 自定義指令 vMove 的實現(xiàn)
const vMove: Directive<any, void> = (el: HTMLElement, binding: DirectiveBinding) => {
  // 獲取需要移動的 DOM 元素，假設(shè)它是傳入元素的第一個子元素
  let moveElement: HTMLElement = el.firstElementChild as HTMLDivElement;
  console.log(moveElement);
  // 鼠標按下事件處理函數(shù)
  const mouseDown = (e: MouseEvent) => {
    // 計算鼠標點擊位置相對于元素左上角的偏移量
    let X = e.clientX - el.offsetLeft;
    let Y = e.clientY - el.offsetTop;
    // 鼠標移動事件處理函數(shù)
    const move = (e: MouseEvent) => {
      console.log(e);
      // 更新元素的位置，實現(xiàn)拖動效果
      el.style.left = e.clientX - X + "px";
      el.style.top = e.clientY - Y + "px";
    };
    // 添加鼠標移動事件監(jiān)聽器，以便拖動元素
    document.addEventListener("mousemove", move);
    // 添加鼠標松開事件監(jiān)聽器，停止拖動
    document.addEventListener("mouseup", () => {
      document.removeEventListener("mousemove", move);
    });
  };
  // 將鼠標按下事件處理函數(shù)添加到移動元素上
  moveElement.addEventListener("mousedown", mouseDown);
  console.log(binding);
};
// 使用 ref 創(chuàng)建響應(yīng)式數(shù)據(jù)
const content = ref('內(nèi)容'); // 原始內(nèi)容
const isEditing = ref(false); // 是否處于編輯模式
const editedContent = ref(''); // 編輯后的內(nèi)容
// 進入編輯模式
const startEditing = () => {
  isEditing.value = true;
  editedContent.value = content.value; // 將原始內(nèi)容設(shè)置為編輯后的內(nèi)容
}
// 退出編輯模式
const stopEditing = () => {
  isEditing.value = false;
  content.value = editedContent.value; // 保存編輯后的內(nèi)容
}
</script>
<template>
  <div class="box" v-move>
    <div class="header">標簽1</div>
    <!-- 使用雙擊事件觸發(fā)編輯模式 -->
    <div @dblclick="startEditing" v-if="!isEditing">{{ content }}</div>
    <!-- 編輯模式下顯示輸入框 -->
    <input type="text" v-model="editedContent" @blur="stopEditing" v-if="isEditing">
  </div>
</template>
<style scoped>
.box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border: 3px solid;
  background: #f59c09;
  .header {
    height: 20px;
    background: #f59c09;
    color: white;
  }
}
</style>

到此這篇關(guān)于Vue3實現(xiàn)可視化拖拽標簽小程序的文章就介紹到這了,更多相關(guān)Vue3拖拽標簽小程序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: