基于 CSS Grid 的简易拖拉拽 Vue3 组件，从代码到NPM发布（3）- 小结

@xachary

于 2024-10-17 18:46:13 发布

阅读量313

点赞数 2

分类专栏： vue3-grid-drag-resize 文章标签： css 前端 vue 编辑器

本文链接：https://blog.youkuaiyun.com/xachary2/article/details/143025395

版权

vue3-grid-drag-resize 专栏收录该内容

3 篇文章

订阅专栏

基本完成了拖动、调整大小、拖入、拖出、嵌套、删除等特性，可以基于组件嵌套，也可以基于数据结构嵌套。算是告一段落了，后面在使用过程发现问题解决问题好了。

请大家动动小手，给我一个免费的 Star 吧~

大家如果发现了 Bug，欢迎来提 Issue 哟~

github源码

NPM

示例地址

文档

交互细节

拖动

基本拖动

在这里插入图片描述

拖动区域扩展

在这里插入图片描述

拖动目标判断

在这里插入图片描述

调整大小

基本调整大小

在这里插入图片描述

调整区域扩展

在这里插入图片描述

拖入

从外部拖入（设置了默认占用空间）

在这里插入图片描述

拖入区域扩展

在这里插入图片描述

跨嵌套拖入

在这里插入图片描述

拖出

跨嵌套拖出

在这里插入图片描述

嵌套

层层嵌套

在这里插入图片描述

删除

躲避选中

在这里插入图片描述

间隙不足偏移

在这里插入图片描述

数据同步

在这里插入图片描述

历时2周业余时间，基本完成设想的“粗放型”拖拉拽交互组件，希望有助于有类似需求的小伙伴们~

More Stars please！勾勾手指~

github源码

NPM

示例地址

文档

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

@xachary

关注关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue2前端实现数据可视化大屏全局自适应 Vue实现所有页面自适应 Vue实现自适应所有屏幕

weixin_41346436的博客

07-04

3656

在Vue.js中创建一个数据大屏，并使其能够自适应不同屏幕大小，通常涉及到布局的响应式设计、CSS媒体查询、以及利用Vue的事件系统来处理窗口大小变化。通过以上步骤，我们创建了一个使用Vuetify布局的响应式数据大屏，它能够根据屏幕宽度动态调整其内容的布局。Vuetify的v-flex组件允许我们轻松地创建响应式的网格布局，而Vuex和全局事件总线则帮助我们在窗口大小变化时更新应用状态和组件布局。在实际项目中，你可能还需要处理更复杂的响应式设计挑战，例如在不同的屏幕尺寸下显示不同的内容或布局。

VueDraggable实现组件内部拖拽、跨组件拖拽功能

weixin_45850417的博客

10-30

2161

1 功能 2 方案要点 3 实现中的踩的坑 4 代码

1 条评论您还未登录，请先登录后发表或查看评论

前端适用的几个拖拉拽插件

weixin_45289656的博客

03-25

5403

Vue 表单生成器(Form Generator)提供21种字段类型，、也可以使用自定义字段进行扩展。生成的模板对Bootstrap友好，并且可以轻松自定义样式。Vue 表单生成器(Form Generator)是一个基于Schema的表单生成器组件，可以基于Schema构建反应式表单。是一款vue3的拖拽插件,基于Sortable.js实现的，你可以用它来拖拽列表、菜单、工作台、选项卡等常见的工作场景。这个上手也挺快的，大部分需求都可以满足。今天分享几个拖拉拽的工具，包括流程图和表单。

一文搞定！可视化拖拽组件库一些技术要点原理分析

Daoyiyun的博客

10-20

4538

可视化拖拽组件库技术要点原理

可拖拽、缩放、旋转组件实现细节

weixin_43960320的博客

05-17

1850

基于 vue3.x + CompositionAPI + typescript + vite 的可拖拽、缩放、旋转的组件目标效果源码地址虽然叫拖拽，但却跟拖拽事件没有一点关系，主要使用mousedown、mousemove、mouseup事件来实现可以看到，核心逻辑主要在 onMousedown 事件处理函数中步骤分析：区域拖拽主要是为了限制元素只能在最近定位父级元素中移动边界值说明：可以看到元素周围有8个小圆点，可以从不同的方向放大或缩小元素 selected 选中拖拽元素时显示缩放小圆点主要关注

Vue 实现拖拽模块(三)自定义拖拽组件的样式

记得抬头微笑

12-09

4400

本文主要介绍了 Vue 自定义拖拽组件的样式，元件支持通过右侧的属性样式配置元件的样式

Vue项目拖拽插件 ---- vuedraggable的安装与使用

weixin_45689946的博客

12-14

9313

vuedraggable是基于Sortable.js的vue组件，vuedraggable官方文档特点：支持触摸设备（如vue项目的移动端开发Quasar）支持拖拽和选择文本支持不同列表之间的拖拽视图模型的同步刷新与vue2的过渡动画（transition-group）兼容有很多监听函数，当需要完全控制时，可以抛出所有变化可以和现有的UI组件相兼容一、安装 npm install vuedraggable 二、引入与使用 <draggable v-model="specim

基于 CSS Grid 的简易拖拉拽 Vue3 组件，从代码到NPM发布（1）- 拖拉拽交互

xachary的博客

10-10

724

基于特定的应用场景，需要在页面中以网格的方式，实现目标组件在网格中可以进行拖拉拽、修改大小等交互。本章开始分享如何一步步从代码设计，最后到如何在 NPM 上发布。

流程图编辑器-拖拉拽-antV X6流程可视化-VUE

weixin_47917431的博客

09-03

3341

上个我记录的relation-graph关系图本来是以后有需要我可以翻阅自己的博客可以当作备胎，使用的时候看一下让自己也知道还有个这么个不错的库，新的项目要有一个流程编辑器，relation-graph提供例子，无论动画效果还是操作手感都挺不错，唯一的遗憾是阅读示例代码要钱（上一个文章C友留言说VIP的，我本以为可以一直白嫖B站视频，没想到要再次白嫖的时候，一个都找不到了），所以我选择了这个，还是阿里实在，不搞vip文档那些。

基于VUE+elementUI实现的首页自定义拖拽功能（1）

weixin_44039226的博客

04-30

8004

最近领导要求系统首页布局改一下，类似于自助建站那种首页可以实现模块的自定义拖拽，并可以实现保存等功能，一下让我这种VUE新手有点慌张，上网上搜一下也没有对应的结局方案，那就自己写吧。不过最终磕磕绊绊也算是实现了。废话不多说，先上功能。首先首页实现功能卡片定义，并可自定义调整大小存储等，卡片内容随意定义多种布局可选，布局也可以随意定义功能卡片的增删等功能（基于layout面板上存在卡片展...

vue跨表格拖拽功能

qq_45384585的博客

10-27

1127

vue多个表格之间的拖拽功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><

vue-draggable学习和使用

weixin_43878117的博客

10-29

2447

# vue-draggable 学习和使用

前端10大开源拖拽排序库汇总, 让搭建,更简单

趣谈前端

04-01

5177

❝hi, 大家好, 我是徐小夕,之前和大家分享了很多「低代码可视化」和「前端工程化」相关的话题, 今天继续和大家分享「8」个非常流行的开源「拖拽排序」库以及「2」个非常有价值的「可视化搭建」解决方案.❞1. dragula一款强大且兼容性极好的拖拽排序库, 兼容「IE7+」, 并且支持「vanilla JavaScript / Angular / React」等框架.「...

vuedraggable拖拽框架

qq_43235503的博客

02-21

786

vuedraggable拖拽框架

vue3拖拉拽组件面板实现（二）使组件可放大缩小

weixin_45750721的博客

06-06

982

【代码】vue3拖拉拽组件面板实现（二）使组件可放大缩小。

拖拽组件实现原理

前端程序猿steven的博客

10-22

3110

直接进主题： 1、做拖拽组件核心是要设置组件绝对定位平且设置动态的style: left top动态变化就行 <template> <div @mousedown="handleMouseDown" class="locationWidget" :class="{ active: isActive }" :style="{ 'margin-top': (widget.marginTop |

Vue中draggable拖拉拽组件使用

梓齐丶的博客

06-09

2356

安装 npm i vuedraggable -S 属性 group: { name: "...", pull: [true, false, clone], tag: 'td' // 默认div，设置draggable标签解析html标签 v-model：data // 绑定数据列表 put: [true, false, array] } //name相同的组可以互相拖动, pull可以写条件判断，是否允许拖走，put可以写条件判断，是否允许拖入 sort: true, // 内部拖动排序列表 dela

vue拖拉拽组件开发

MLGB__NIU的专栏

10-24

4707

需求：课程排课代码地址：https://github.com/PT-github/vue-cli3.git branch: test-drag 遇到的问题：内部拖拽时，影响了外部不相干的div的样式（比如说border和background），问题只在谷歌浏览器上存在，很诡异。解决方案：外部div设置div样式position为relative 在ondragover方法中需要...

vue实现拖拽的组件