vue3 拖拽插件(drag)

前端vue项目中,经常会有弹框拖拽的需求,下面介绍常用方法:
1.如果你使用的是elementPlus插件的el-dialog组件,只需要增加draggable属性即可,代码如下:

<el-dialog
    v-model="showDiloag"
    width="500"
    draggable
 ></e--dialog>

2.如果不使用ele 的组件,自己写弹框,那么可以自定义指令,代码如下(vue3):

drag.js文件:

const drag = {
  mounted(el, binding) {
    el.style.position = "absolute";
    const data = binding.value || { x: 0, y: 0, zIndex: 99999 };
    let { x, y, zIndex = 99999 } = data;
    el.style.left = x + "px";
    el.style.top = y + "px";
    el.style.zIndex = zIndex;
    let isDragging = false;
    let baseMousePosition = { x: 0, y: 0 };
    let dom = data.targetRef || document.getElementById(data.targetId) || el;
    dom.style.cursor = "move";
    const onDragStart = (e) => {
      if (e.button === 0) {
        isDragging = true;
        baseMousePosition.x = e.pageX;
        baseMousePosition.y = e.pageY;
        window.addEventListener("mousemove", onDraging);
      }
    };
    const onDragEnd = (e) => {
      isDragging = false;
      x = parseInt(el.style.left);
      y = parseInt(el.style.top);
      window.removeEventListener("mousemove", onDraging);
    };
    const onDraging = (e) => {
      if (isDragging) {
        el.style.left = e.pageX - baseMousePosition.x + x + "px";
        el.style.top = e.pageY - baseMousePosition.y + y + "px";
      }
    };
    dom.addEventListener("mousedown", onDragStart);
    window.addEventListener("mouseup", onDragEnd);
  },
};

const directives = {
  install: function (app) {
    app.directive('drag', drag)
  }
}
export default directives

vue文件使用:

<script setup>
import { ref } from "vue";

const dragRef = ref()
const dragOptions= ref({
  x: 100,
  y: 200,
  targetRef: dragRef,
})
</script>

<template>
	<div v-drag="dragOptions" class="dialog">
		<div class="dialog_header" ref="dragRef">弹框标题</div>
		<div class="dialog_content">弹框内容</div>
	</div>

<template>

这里的dragOptions就是配置项,x和y是弹框的初始位置的left和top值,targetRef的值是你希望鼠标在哪个dom元素可以拖拽,如果不传,就默认在整个弹框范围,都可以拖拽。

<think>嗯,用户想了解Vue3拖拽插件。首先,我需要回忆一下常见的Vue3拖拽库。Vue.Draggable、Vue DnD、Sortable.js这些应该都是比较流行的。不过用户可能不仅需要列表排序,还可能涉及更复杂的拖拽功能,比如拖放文件或者自定义拖拽行为。 接下来,得确认每个插件的适用场景和特点。比如,Vue.Draggable是基于Sortable.js的,适合列表排序,Vue3支持可能需要用vue-draggable-next这个版本。然后Vue DnD可能与React DnD类似,适合更复杂的拖拽交互,比如看板应用。还有可能用户需要文件上传拖拽,可能需要提到vue3-dnd这样的库。 用户可能不太清楚这些插件的安装和使用方法,所以每个部分要给出安装命令和示例代码。注意要区分Vue3的写法,比如组合式API,使用<script setup>语法。同时要提醒版本问题,比如vue-draggable-next是Vue3专用,避免用户安装错误版本。 另外,可能需要比较各个插件的优缺点,帮助用户根据需求选择。比如,Vue.Draggable适合简单列表,而Vue DnD适合复杂场景。文件上传的话可能需要其他库。同时,要确保提到的每个插件都支持Vue3,避免兼容性问题。 最后,总结部分需要给出选择建议,根据不同的使用场景推荐合适的插件。可能用户没有明确说明具体需求,所以需要覆盖常见的几种情况。另外,检查是否有遗漏的流行库,比如dragula或者其他,但可能Vue生态中比较常用的是提到的这几个。确保每个步骤都符合系统级指令,比如数学公式的正确使用,但这个问题可能不需要数学公式,不过要确认是否有可能涉及的地方。最后用中文保持口语化,结构清晰,分步骤说明。</think>我来帮你梳理一下Vue3中常用的拖拽插件及其使用方法,分步骤说明: 一、主流Vue3拖拽插件 1. **Vue.Draggable(推荐指数:★★★★★)** - 基于Sortable.js封装 - 支持列表排序、拖拽交换 - 特点:API简单易用,支持动画效果 - 安装:`npm install vue-draggable-next` 2. **Vue DnD(推荐指数:★★★★☆)** - 基于React DnD改造 - 适合复杂拖拽场景(如看板系统) - 特点:支持类型约束、拖拽状态管理 - 安装:`npm install vue-dnd-adapter` 3. **Sortable.js(推荐指数:★★★☆☆)** - 纯JavaScript库 - 需要手动封装到Vue组件 - 特点:功能全面,性能优秀 - 安装:`npm install sortablejs` 二、基础使用示例(以Vue.Draggable为例) ```vue <script setup> import { ref } from &#39;vue&#39; import draggable from &#39;vuedraggable&#39; const list = ref([ { id: 1, name: &#39;Item 1&#39; }, { id: 2, name: &#39;Item 2&#39; }, { id: 3, name: &#39;Item 3&#39; } ]) </script> <template> <draggable v-model="list" item-key="id" class="list-group" > <template #item="{ element }"> <div class="list-item"> {{ element.name }} </div> </template> </draggable> </template> ``` 三、进阶功能实现 1. **跨容器拖拽** ```vue <draggable group="shared-group" :list="list1" @change="logChange" /> <draggable group="shared-group" :list="list2" @change="logChange" /> ``` 2. **拖拽限制** ```vue <draggable :move="checkMove" @start="onDragStart" @end="onDragEnd" /> <script> const checkMove = (evt) => { return evt.related.className !== &#39;forbidden&#39; } </script> ``` 四、性能优化建议 1. 使用虚拟滚动(建议`vue-virtual-scroller`) 2. 复杂元素添加`.no-drag`类名 3. 大列表添加防抖处理 ```javascript import { debounce } from &#39;lodash&#39; const onUpdate = debounce((e) => { // 处理更新逻辑 }, 300) ``` 五、选择建议 - 简单列表排序 → Vue.Draggable - 复杂交互场景 → Vue DnD - 需要文件拖拽 → 配合`vue3-dropzone` - 需要原生拖拽 → 使用HTML5 Drag and Drop API 注意:实际使用时需根据项目需求选择,建议先通过官方文档验证API兼容性。对于移动端项目,建议额外添加touch事件处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值