2024-04-29这篇博客直接在上篇的基础上完成，最终效果：效果图1：效果图2：好了，请允许我把图片贴了两遍，方便大家看效果了~可以看出我们的图片的li的html其实还是挺复杂的，于是我把html文档做了一些修改：可以看到我把li的显示，独立写到了一个div#template，默认是hidden的，这样做的好处是什么呢？避免我们每上传一个文件，在js中出现大量的创建元素与赋属性的代码，一般设计比较复杂的html元素的生成，建议使用这种方式，可以简化代码，也利于我们代码的后期维护。Js代码：/**

https://www.qianduange.cn//article/6275.html 分类：前端知识

2024-04-29最近遇到一个功能，需要的是把表格的列可以配置，用户可以根据自己想要看的数据来改变表头列显示哪些隐藏哪些。于是我做了两个版本。第一个版本是自由搭配的。就是提前顶号所有的列，然后自己可以拖拽到想要位置顺序。也可以自己新增一个二级表头自定义一个名称把表头都拖进去组成多级表头表格。不过这种的毕竟复杂。第二个版本就简单一些了，是固定的列，比如十列写好了，然后用户只能在这十列里面选择显示或隐藏哪些。位置不能动，文字也不能动。就是单纯的显示隐藏列。_vue el-table

https://www.qianduange.cn//article/6208.html 分类：前端知识

2024-04-29vue-grid-layout是一个适用于vue的拖拽栅格布局库，功能齐全，适用于拖拽 高度/宽度自由调节的布局需求，本文将讲述一些常用参数和事件，以及做一个同步拖拽的Demo。

https://www.qianduange.cn//article/6112.html 分类：前端知识

2024-04-22超级居中 快速布局 => 拖拽水平垂直居中 没有flex布局的缺点。_display: grid; place-items: center;

https://www.qianduange.cn//article/5737.html 分类：前端知识

2024-04-21是一个Vue.js的拖放和排序列表组件。它基于库，可以用于实现拖放、排序、带有动画效果的过渡以及其他特性。支持Vue.js 2.x和3.x，可以在任何现代浏览器和移动设备上使用。还支持自定义拖放元素，可以用于实现更复杂的拖放和排序功能。下面是一个例子：return {return {} .clone {} .drag {} .text {flex : 1;_vue拖拽排序组件

https://www.qianduange.cn//article/5598.html 分类：前端知识

2024-04-19jsPlumb开发教程（实现html5拖拽连线）,连线、拖拽_jsplumb实现拖拽连接模型

https://www.qianduange.cn//article/5259.html 分类：前端知识

2024-04-15页面功能 可实现模块的放大缩小以及位置的更换 同时echarts会跟着父元素大小而变化，有兴趣者自己研究吧 代码放在下面了 直接cv就好 不难 但是有些细节要注意 比如draggable需要绑定唯一的key值否则改变元素样式时会出问题 以及echarts跟随父盒子自适应需要在echarts中配置grid属性并结合window的监听事件去实现。在使用draggable的时候遇到了一些问题 好在最终解决了 记录下希望能帮助到有缘人。_vue3中使用 vuedraggableresizable拖拽变大变小更改px

https://www.qianduange.cn//article/5005.html 分类：前端知识

2024-04-15在现代Web开发中，实现拖拽功能是一项常见而强大的需求。HTML5引入了拖放API（Drag and Drop API），为我们提供了一种简单而高效的方式来实现拖拽操作。其中，e.dataTransfer是该API中的一个重要属性，用于在拖拽操作中传递数据，并控制拖放的效果和行为。本篇博客将深入探索e.dataTransfer的使用，帮助你更好地理解和应用HTML5拖放功能。e.dataTransfer是HTML5拖放API中的关键属性，它是一个DataTransfer对象，提供了一组方法和属性，用于在拖拽_e.datatransfer

https://www.qianduange.cn//article/4989.html 分类：前端知识

2024-04-08基于Vue实现文件上传：form-data、base64、缩略图、进度条、拖拽上传、切片上传_vue上传文件

https://www.qianduange.cn//article/4563.html 分类：前端知识

2024-04-071，直接使用label标签把内容如文本和表单标签一起包裹起来。注：右下角可拖拽改变文本大小。3，在label标签的for属性中设置对应id属性值。2，需要把label标签的for属性删除即可。1，使用label标签把内容如文本包裹起来。①没有语义布局标签（div、span）div标签：一行只显示一个（独占一行）span：一行可以显示多个（双标签）2，在表单标签上添加id属性。_文本域标签

https://www.qianduange.cn//article/4532.html 分类：前端知识