vue-smooth-dnd
发表于|更新于
|浏览量:
愤怒是由于别人的过错而惩罚自己——蒲柏
分享一个vue拖动组件
github:https://github.com/kutlugsahin/vue-smooth-dnd

在线Demo:https://kutlugsahin.github.io/vue-smooth-dnd/#/cards

相关推荐
2026-09-07
hyperframes
活着就要学习,学习不是为了活着。——培根 HyperFrames:当 HTML 开始讲故事,视频制作也有了新的表达方式视频创作常常被想象成一条漫长的生产线。 画面、字幕、转场、音乐、时间轴、导出设置、格式编码,每个环节都像一扇需要单独推开的门。对于希望自动化制作内容的人来说,真正棘手的地方并不只是完成一支视频,而是如何把创意、代码、媒体资源与稳定的渲染结果放进同一条可重复执行的流程。 HyperFrames 希望把这件事变得更直接。 它是一套开源的视频渲染框架,核心思路非常清晰:编写 HTML,渲染视频,并且为智能体而构建。 项目地址:https://github.com/heygen-com/hyperframes 在 HyperFrames 的世界里,HTML、CSS、媒体资源与可定位动画不只是网页中的元素,它们能够共同组成确定性的 MP4 视频。开发者可以通过命令行在本地使用它,也可以让 AI 编程智能体借助技能体系参与视频制作,还可以将其作为代码库的一部分接入自动化工作流。 视频不再只能从传统时间轴中诞生,也可以从一个 index.html 开始。 视频,为什么不能像...
2024-09-23
position-try-fallbacks
教育成功的秘密,在于尊重学生。——爱默生 昨天我们聊到了 position-try | 阿超 今天是它的拓展,我们通过@position-try定义移动到的位置,然后用position-try使用 语法例如: 12345678910@position-try --my-custom-position { position-area: top left; width: 50px;}.target { position: absolute; position-area: top right; position-try-fallbacks: --my-custom-position;} 我们这里还是用昨天的例子,定义一个 12345/* 定义自定义的 `position-try` 规则,用于小型目标元素的样式 */@position-try --compact-target { height: 40px; /* 高度设为40px */ margin: 0px; /* 没有边距 */} 然后我们使...
2022-03-18
判断浏览器窗口滚动到最底部
任何人都应该有自尊心自信心独立性,不然就是奴才。但自尊不是轻人,自信不是自满,独立不是弧立。——徐特立 首先是昨天我们说的vue中绑定@scroll事件,别忘了加对应的高度,以及检查overflow-y: 123<div @scroll="onScroll" class="allow-scroll"> 我是很高很长很长(超过外部div高度)的内容...</div> 然后是滚动事件处理: 12345678onScroll(e) { // Y轴滚动距离 偏移高度 总高度 let { scrollTop, clientHeight, scrollHeight } = e.target console.log(`scrollTop + clientHeight ${scrollTop + clientHeight} >= scrollHeight-1 ${scrollHeight - 1}`) if (scrollTop + cl...
2021-09-13
css模糊
我们都希望自己过艺术的一生,但艺术是什么,却没有明确的定义。你过早地为人生设限,大多数时候是不成熟的表现。——灵遁者 对应的css代码为: 1filter: blur(1px); 这里可以更改blur值的大小 1filter: blur(2px);
2021-03-27
elementUI去掉input上下按钮
快乐就像香水,不是泼在别人身上,而是洒在自己身上。——拉尔夫·沃尔多·爱默生 我们使用el-input当type为number时 会出现右边这种箭头,影响美观 我们可以使用样式穿透 1<el-input type="number"></el-input> 123/deep/ input::-webkit-inner-spin-button { -webkit-appearance: none;} 然后就可以去掉这两个箭头啦
2021-08-18
回车提交表单
却是平流无石处,时时闻说有沉沦。——唐•杜荀鹤 我们在页面开发中经常会写一些表单,但身为一个懒人,肯定是懒得点提交按钮的,我一般直接按回车提交 当我们的form满足只有一个input的时候,回车事件是生效的 123<form> <input/></form> 当我们的form有多个input的时候,回车事件失效了 1234<form> <input/> <input/></form> 此时我们可以加一个input,让type=submit 即可再次满足回车提交效果 12345<form> <input/> <input/> <input type="submit"/></form> 如果要隐藏掉,使用样式display:hide隐藏即可 但有时如果我们如果需要回车不提交表单,则可以避免上述条件 如果想要不执行submit事件,可以直接在form上加一个onsubmit="return false&q...
