简单使用vue拖拽组件vue3-dnd

这篇具有很好参考价值的文章主要介绍了简单使用vue拖拽组件vue3-dnd。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

项目中需要使用到拖拽,这里使用vue3-dnd来满足需求

这里项目使用的vue3(使用js而非ts)

插件官网地址:Vue3 DnD

安装

npm install vue3-dnd react-dnd-html5-backend

然后在app.vue里面添加代码

<template>
    <DndProvider :backend="HTML5Backend">
        <router-view/>
    </DndProvider>
</template>

 通过DndProvider组件为项目提供拖拽功能

 概念

项目item和类型:被拖拽的对象我们称呼为某种类型的项目,类型的作用是让放置目标过滤可以放置的项目

监视器monitor:存放项目的拖动状态,例如项目是否可以放置、项目移动了多少像素等

拖拽的元素drag:可以拖拽的元素,一般用:ref="drag"设置元素可以拖拽(drag是需要调用插件方法设置的ref函数,下面代码进行示例)

放置的元素drop:可以将拖拽的元素放置在此,一般用:ref="drop"设置元素可以放置(drop是需要调用插件方法设置的ref函数,下面代码进行示例)

思路

需求是一个固定大小的元素上有多个可以拖动的元素,拖动后需要保存这些元素的位置

这里先定义一个组件dragBox.vue 每个组件就是一个可以拖动的元素,然后将组件注册全局

// 可拖动的元素类型
export const dragItemType = {
    TEXT: 'text',
    TABLE: 'table'
}

注意:    <div v-if="isDragging" :ref="drag" /> 这个div是必须的。否则只能拖动一次。

<template>
    <div v-if="isDragging" :ref="drag" />
    <div :ref="drag" class="box" v-else :style="{left:left+'px',top:top+'px',height:height+'px',width:width+'px',fontSize:fontSize+'px'}">
        {{ title }}
        <slot></slot>
    </div>
</template>

<script setup>
import {useDrag} from 'vue3-dnd'
import {defineProps} from 'vue'
import {dragItemType} from "@/util/enum";
import { toRefs } from '@vueuse/core'

const props = defineProps({
    id: String,//唯一标识
    left: Number,//左边距
    top: Number,//上边距
    height:Number,//元素高度
    width: Number,//元素宽度
    fontSize:Number,//字体大小
    title: String//文本
})

const [collect, drag] = useDrag(() => ({
    type: dragItemType.TEXT,
    item: {id: props.id, left: props.left, top: props.top},
    collect: monitor => ({
        isDragging: monitor.isDragging
    })
}))
const { isDragging } = toRefs(collect)
</script>

<style scoped>
.box {
    position: absolute;
    background-color: white;
    border: 1px dashed gray;
    cursor: move;
    padding:0;
}
</style>

在页面上,我们就可以使用该拖动组件了

<template>
<div>
    <div class="container" :ref="drop" style="height:300px;width:300px;">
         <drag-box v-for="value in details" :key='value.field' :id="value.field" :top="value.top"
                                              :fontSize="value.fontSize"
                                              :left="value.left" :height="value.height"
                                              :width="value.width" :title="value.title">
         </drag-box>
    </div>
</div>
</template>

<script setup>
import {ref, reactive, onMounted, watch, inject, computed, toRaw} from 'vue';
import {useDrop} from 'vue3-dnd'
import {dragItemType} from "@/util/enum";

//定义拖拽元素
const details=ref([])
details.value.push({
    field:'test1',
    title:'测试字段1',
    fontSize:'9',
    height:'20',
    width:'100',
    top:'10',
    left:'10',
})
details.value.push({
    field:'test2',
    title:'测试字段2',
    fontSize:'9',
    height:'30',
    width:'150',
    top:'50',
    left:'50',
})
//移动元素(通过修改子组件的top和left来移动)
const moveBox = (id, top, left) => {
    let box = details.value.find(x => x.field === id)
    Object.assign(box, {top, left})
}
//定义放置元素,
const [, drop] = useDrop(() => ({
    accept: dragItemType.TEXT,
    drop(item, monitor) {
        const delta = monitor.getDifferenceFromInitialOffset()//获取位移距离
        const left = Math.round(item.left + delta.x)//计算移动后的top和left
        const top = Math.round(item.top + delta.y)
        moveBox(item.id, top, left)
        return undefined
    }
}))
</script>

<style scoped>
.container {
    border: 1px solid grey;
    margin: 10px;
    position: relative;
}
</style>

补充

更多composition API:https://hcg1023.github.io/vue3-dnd/guide/composition/use-drag.html

更多示例:示例 | Vue3 DnD 

本文只提供其中一种简单的应用。文章来源地址https://www.toymoban.com/news/detail-412033.html

到了这里,关于简单使用vue拖拽组件vue3-dnd的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3实现组件可拖拽 vuedraggable

    npm i -S vuedraggable@next 中文文档,里面有完整代码案例,值得一看 vue.draggable vue3 版本在工作台中的应用场景 - itxst.com

    2024年02月13日
    浏览(36)
  • vue3拖拽布局+动态组件+自适应布局

    1.拖拽布局插件 Vue Grid Layout -️ 适用Vue.js的栅格布局系统 可拖动和可调整大小栅格布局的Vue组件。 https://jbaysolutions.github.io/vue-grid-layout/zh/ //在package.json中dependencies下添加下面插件库,并执行命令npm install  \\\"vue-grid-layout\\\": \\\"^3.0.0-beta1\\\",  2.拖拽页面代码 3.图表子组件代码

    2024年02月11日
    浏览(41)
  • vue3 - element-plus表格组件el-table实现鼠标拖曳排序功能,vue3 Table表格拖拽排序,表格每行使用鼠标拖动进行排序功能,表格拖拽排序实现(详细示例代码,一键复制开箱即用

    在vue3+elementPlus网站开发中,详细完成el-table表格的鼠标拖拽/拖曳/拖动排序,vue3使用element plus表格组件进行表格每行的拖动换位置排序功能(支持一键开启和关闭鼠标是否可拖动排序,代码易改造灵活),稍加改造可支持【树形复杂表格的排序】! 详细示例源代码,复制运行

    2024年04月09日
    浏览(58)
  • 记录--Vue3问题:如何实现组件拖拽实时预览功能?

    实现一个CMS内容管理系统,在后台进行内容编辑,在官网更新展示内容。 关于后台的编辑功能,大致分为两部分: 组件拖拽预览 、 组件内容编辑实时预览 。 对于组件拖拽预览,用户可以在含有各种功能组件的列表中,选择需要的组件进行拖拽。将组件拖拽到预览画布中后

    2024年02月04日
    浏览(42)
  • vue使用vuedraggable拖拽组件,进行组件生成

    最近写项目使用到了vuedraggable这个插件,进行组件生成,由于第一次使用,就上网搜相关文章,结果网上基本上都是上下拖拽之类的,没有找到自己想要的结果,然后就根据自己的需求结合相关文档进行了开发 开发完后大概结果视频如下: vuedraggable拖拽生成组件 静态效果如

    2024年02月06日
    浏览(46)
  • 《Vue3+Typescript》一个简单的日历组件实现

    这是一个没有套路的前端博主,热衷各种前端向的骚操作,经常想到哪就写到哪,如果有感兴趣的技术和前端效果可以留言~博主看到后会去代替大家踩坑的~ 主页: oliver尹的主页 格言: 跌倒了爬起来就好~ 目录 一、前言 二、效果图 三、核心思路 四、代码实现 4.1 本月日期

    2024年02月14日
    浏览(40)
  • 深入解析React DnD拖拽原理,轻松掌握拖放技巧!

    我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。。 本文作者:霁明 业务中会有一些需要实现拖拽的场景,尤其是偏视觉方向以及移动端较多。拖拽在一定程度上能让交互更加便捷,能

    2024年02月08日
    浏览(49)
  • 记录--Vue3基于Grid布局简单实现一个瀑布流组件

    在学习Grid布局之时,我发现其是CSS中的一种强大的布局方案,它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,在刷某书和某宝首页时,我们发现其展示方式就是一种瀑布流,是一种流行的网站页面布局,视觉表现为参差不齐的多栏布局,随着页

    2024年02月05日
    浏览(61)
  • 如何使用vue-smooth-dnd

    Vue Smooth DnD是一个基于Vue的平滑易用的拖放库。它提供了简单易用的API和可自定义的样式。 要使用Vue Smooth DnD,可以按照以下步骤进行操作: 安装Vue Smooth DnD 在组件中引入Vue Smooth DnD 在组件的template中使用     在这个例子中,我们使用了Vue Smooth DnD组件,并传入了一些属性和

    2024年02月11日
    浏览(41)
  • vue2&vue3 el-table实现整行拖拽排序功能(使用sortablejs插件)

    Vue3组件地址 Vue2组件地址 Vue2基于ElementUi再次封装基础组件文档 vue3+ts基于Element-plus再次封装基础组件文档

    2024年02月08日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包