浅谈使用element ui + vuedraggable + sortablejs实现多种版式布局及托拽(1)

使用vue构建一个自由建站项目 写在前面 之前一直用Jquery+Jquery-ui来做这个项目,那个时候没有设计稿,没有项目需求,就因为BOSS一句话,要做这样的东西,当时就…好吧!我承认,其实已经习惯了,无所谓了(也是无奈,哎)!!! 在之后的一段时间里,做了一个demo出来,BOSS很满意了,所以自己接下来就慢慢做吧,差不多两三个月吧,就闷头做这个,后来项目上线了,当然因为产品的不完善,还是有点问题了! 不过基本能 阅读详情

前言:在当前主流的PC界面实现方案中,为了给客户更好的体验,我们需要实现多种布局方式

  • 一列布局(100%)
  • 两列布局(50%,50%)
  • 三列布局(33%,33%,33%)
  • 左右布局(3 7分布,7 3分布)

这里写图片描述
图片(1)
这里写图片描述 图片(2)
这里写图片描述
图片(3)

图片1,2是其中的两种布局效果图,3版式布局样式

使用element UI实现布局方案

js布局数据

这里写图片描述

这里写图片描述
vue渲染布局

这里写图片描述

在layTable选择不同的布局方式后,,查找beforeblocks对应布局,赋blocks,在vue文件渲染blocks,使用element ,通过控制布局。

这样就可以通过不同选择实现版式布局了。
加入我的技术群,一起学习

707196135
在这里插入图片描述

SortableJS+Element UI 实现 el-table 行拖拽排序完整指南 后台管理系统中,表格行的拖拽排序是高频交互需求,但 Element UI 的 el-table 并未内置该能力。原生 HTML5 拖拽不仅视觉反馈粗糙,还需自行处理占位、动画与数据同步,在移动端兼容性也堪忧。SortableJS 作为轻量无依赖的拖拽库,通过监听鼠标与触摸事件,以 ghost 元素和 transform 动画实现流畅排序;其核心在于只操作 DOM,而数据顺序需通过 oldIndex 与 newIndex 手动同步回 Vue 数组,配合 row-key 和正确的表体挂载点,才能避免行错乱。该方 阅读详情

相关推荐

从婴儿学步到工业级应用:VLA的‘隐式标定‘原理通俗图解

本文深入解析VLA(Vision-Language-Action)模型的'隐式标定'原理,通过类比婴儿学习机制,揭示其如何替代传统手眼标定技术。文章对比了工业机器人传统标定与VLA数据驱动方法的差异,并可视化神经网络注意力机制,展示其在空间关系编码上的突破性进展。最后探讨了VLA在工业应用中的优势与混合架构解决方案。

pz890123456的博客 323

ElementUI之组件layout三种布局方式

(1)引入elementui.js文件—在普通的html页面中使用 <!-- 两者顺序不能变化,因为elementui是基于vue的 --> <link rel="stylesheet" href="../../index.css"> <script src="../../vue.js"></script> <script src="../../elementUI.js"></script> (2)编写

rraxx的博客 1万+

腾讯会议录屏损坏修复:使用 recover_mp4 工具的完整解决方案

腾讯会议录屏损坏修复指南 当腾讯会议录屏因电脑蓝屏等意外导致MP4文件损坏时,可使用recover_mp4工具结合FFMPEG进行修复。操作步骤包括:1)准备相同参数正常视频作为参考;2)分析正常视频生成结构文件;3)分离损坏视频的音视频流;4)使用FFMPEG重新封装。该方法能有效修复因意外中断导致的视频索引损坏问题。修复前需将工具和文件放在同一目录下,并确保参考视频与损坏录屏的参数完全一致。

m0_62498496的博客 2620

后台管理系统中常见的三栏布局总结:使用element ui构建

常用的后台管理系统,侧边栏的设置

qq_33404590的博客 2282

c# U盘禁用---守护进程(插入,拔出,卸载等操作)

一、简介 传统的对U盘禁用,我们多采用修改注册表的方式,详情参考:https://blog.youkuaiyun.com/qq_25372599/article/details/79815407;本文将介绍一种其他的方式–后台守护程序。其原理非常简单:当守护程序检测到U盘的插入信号,我们自动卸载U盘,致使系统无法识别U盘,达到禁用U盘的效果。 二、程序设计 2.1 变量定义 strin...

星星之火燃亮码空 2845

使用openMVS对样例数据进行重建

openMVS根据github上的步骤进行编译。注意,如果没有GPU,用不了CUDA的话,那么需要在openMVS目录下找到CmakeLists.txt文件,把CUDA设置为OFF: SET(OpenMVS_USE_CUDA OFF CACHE BOOL "Enable CUDA library") 可执行的文件生成在openMVS_build/bin/里面,在openMVS_build文件夹下打开终端,按照顺序执行如下命令即可逐步重建。其中,-w 设置的是数据的总路径,-i 后接输入的文件名,-o

YuhsiHu的博客 2883

【elementUI系列一】vue拖拽功能实现-vuedraggable实现多层嵌套拖拽

draggable区域内嵌入多层,要把拖拽区域加上class名称,draggable=‘.class名’,这样就能确保draggable内部分可以拖拽,部分不能拖拽 el-image的点击事件和vue.draggable的拖拽事件会有事件冲突的问题,那么你需要使用.stop和.prevent修饰符来禁止默认事件和冒泡.

qq_37485170的博客 6243

国产数据库安装部署说明

国产数据库安装部署说明

weixin_38203586的博客 906

Checkbox 多选框

<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox> <div style="margin: 15px 0;" /> <el-checkbox-group v-model="checke...

weixin_40030173的博客 965

sqoop抽取mysql的数据到hive表里面,字段内容被自动截取,导致字段不全的问题解决

今天央视重新转播NBA,写篇博客纪念一下这个重要的日子,湖人的表现就呵呵了!!!! 强行转到博客的主题来 mysql的字段属性:该字段能存下的值比如:“山东” `province` varchar(3) NOT NULL COMMENT '省份' 用sqoop sqoop import --connect "jdbc:mysql://xxxxxx:3306/xxxxxx?tinyInt1isBit=false&zeroDateTimeBehavior=convertToNull..

放肆桀骜 962

FoundationPose 4090部署 真实场景迁移

复现并应用foundationpose

m0_52835296的博客 611

bootstrap左右布局模板_ElementUI 技术揭秘(3)— Layout 布局组件的设计与实现

前言当我们拿到一个 PC 端页面的设计稿的时候,往往会发现页面的布局并不是随意的,而是遵循的一定的规律:行与行之间会以某种方式对齐。对于这样的设计稿,我们可以使用栅格布局来实现。早在 Bootstrap 一统江湖的时代,栅格布局的概念就已深入人心,整个布局就是一个二维结构,包括列和行, Bootstrap 会把屏幕分成 12 列,还提供了一些非常方便的 CSS 名让我们来指定每列占的宽度...

weixin_39812065的博客 1430

【乐企】有关乐企能力测试接口对接-基础版(详细)

乐企能力测试接口对接详细代码以及步骤

九七的博客 7653

Vue.Draggable与第三方UI库集成:Element UI表格拖拽实战

你是否还在为Element UI表格无法实现行拖拽排序而烦恼?是否因业务需求需要动态调整表格列顺序却找不到优雅解决方案?本文将通过Vue.Draggable组件,手把手教你实现表格行拖拽排序与列顺序调整,让你的数据表格瞬间拥有专业级交互体验。 ## 核心实现原理 Vue.Draggable基于SortableJS实现拖拽功能,通过自定义标签(tag)属性可无缝集成到各类UI组件中。对于表格场景...

gitblog_01046的博客 895

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

10分钟实现Vue Admin Template拖拽排序:终极交互优化指南

Vue Admin Template作为基于Vue.js和Element UI的后台管理系统模板,提供了完整的后台管理功能架构。本文将展示如何在10分钟内为Vue Admin Template添加表格拖拽排序功能,提升数据管理的交互体验。 ## 为什么需要拖拽排序功能? 在后台管理系统中,数据列表的排序操作非常常见。传统的排序方式需要用户手动输入排序号或点击上下箭头,操作繁琐且效率低下。拖拽排

gitblog_01059的博客 409

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

DoTAT前端架构剖析:基于Vue 2 + Element UI构建专业标注平台的完整方案

DoTAT 是一款基于 Web、面向领域的**通用文本标注工具**,支持实体标注、关系标注、事件标注、文本分类、字典/正则自动标注以及标注审核环节。它的前端工程采用经典的 **Vue 2 + Element UI** 企业级架构(基于 vue-element-admin 模板深度定制),本文将完整剖析这套文本标注平台的前端架构方案:技术选型、目录分层、权限模型、状态管理与核心标注模块实现,为你搭建

gitblog_00240的博客 958

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

猫步简历技术架构解析:Vue3+TypeScript驱动的开源简历设计平台

猫步简历是一款基于现代Web技术栈构建的开源简历设计生成器,采用Vue3 + TypeScript + Vite + Element-plus + Pinia技术架构,提供完整的简历设计、AI智能生成、多格式导出等核心功能。在前100个字内,该平台通过模块化组件设计和可视化拖拽编辑,支持简历设计、AI简历生成、AI润色、AI语种翻译等关键技术特性,为开发者和企业用户提供高效的技术解决方案。 ##

gitblog_00968的博客 372

vue-draggable组件教程:可拖拽滑动控制多列表的组件(类似SAP日报功能)

介绍 draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动,可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作。 安装 1.首先,你需要有一个由vue-cil创建的vue项目,我这里使用我的一个开源前端进行展示,需要可自取。传送门 然后执行如下命令。 yarn add vuedraggable 或者 npm i -S vuedraggable 出现下图信息即为完成。 2.创建一个用于展示的页面并引入dragga

jxysgzs的博客 4084

多行多列控件:UICollectionView

本章通过先总体介绍UICollectionView及其常用方法,再结合一个实例,了解如何使用UICollectionView。   UICollectionView 和 UICollectionViewController 类是iOS6 新引进的API,用于展示集合视图,布局更加灵活,可实现多列布局,用法类似于UITableView 和 UITableViewController 类。

xiaoyangsavvy的专栏 5991

vue3 中使用vue.draggable实现element-ui table 行、列拖拽

vue.draggable是一款vue3的拖拽插件,是基于Sortable.js实现的,可以用它来拖拽列表、菜单、工作台、选项卡等常见的工作场景。

qq_52721978的博客 7887

element-ui

type="flex",采用flex布局,搭配justify="center|end|space-between|space-around",默认start。:xs、:sm、:md、:lg、 :xl,响应式布局,值是占有的份数。:gutter,间隙,不会占span的份数。:span,占的份数,共24份。:offset,偏移量。

大菠萝 900

vue拖拽列表----vuedraggable组件;ElementUI 实现Table组件实现拖拽效果;vue3使用vue-draggable-plus

vue拖拽列表----vuedraggable组件;ElementUI 实现Table组件实现拖拽效果

i_am_a_div的博客 3295

【Vue2 + ElementUI】拖动侧边栏以便自由调整左右两侧的宽度

侧边栏,自由调整宽度

weixin_47375144的博客 7144

Element UI学习记录之布局

目录 Element UI学习记录之布局 一、Layout布局 二、Container布局容器 Element UI学习记录之布局 一、Layout布局 基本概念:一行通过分割为24栅格栏进行布局,如果要占满一行如下: <!--el-row 表示一行--> <!--el-col 表示一列--> <el-row> <el-col :span="24"> 24 </el-col> <...

qq_42750982的博客 7032

三列布局的三种方法

自身浮动法 此代码较简单,左栏左浮动,右栏右浮动,主栏内容放在最后,用margin 值为左右的宽度来实现自适应 注意:不浮动的元素要放在浮动元素后面绝对定位法 此方法与自身浮动法相似,但是使用的是绝对定位,左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主题栏采用左右的margin值来撑开距离 注意:采用浮动的方法时,浮动元素本身会占据其位置(对不浮动的元素来说,都浮动的元素不占据位置

DaiDai的博客 1537

Vue.Draggable+Element-ui Table实现拖拽

Vue.Draggable GitHub地址:https://github.com/SortableJS/Vue.Draggable Live Demos:https://sortablejs.github.io/Vue.Draggable/ Live Demos:https://david-desmaisons.github.io/draggable-example/ Install yarn ...

vsapx的博客 2万+
上一篇: vue 图片渲染
下一篇: 浅谈使用element ui + vuedraggable + sortablejs实现多种版式布局及托拽(2)
bloxed
博客等级 码龄10年 263粉丝 192原创
评论 28
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值