草庐IT

拖拽库

全部标签

【鸟哥杂谈】十分钟搭建自己的本地 Node-Red可拖拽图形化物联网

忘记过去,超越自己❤️博客主页单片机菜鸟哥,一个野生非专业硬件IOT爱好者❤️❤️本篇创建记录2022-10-16❤️❤️本篇更新记录2022-10-16❤️🎉欢迎关注🔎点赞👍收藏⭐️留言📝🙏此博客均由博主单独编写,不存在任何商业团队运营,如发现错误,请留言轰炸哦!及时修正!感谢支持!🔥ArduinoESP8266教程累计帮助过超过1W+同学入门学习硬件网络编程,入选过选修课程,刊登过无线电杂志🔥目录1.前言2.Node-RED特点2.1基于浏览器的流程编辑2.2基于Node.js构建2.3利于发展的分享生态环境3.Node-RED能用来做什么?3.1案例一:控制LED灯3.2案例二:使用No

支持拖拽的富文本编辑器

真正的大师,永远都怀着一颗学徒的心!一、项目简介支持拖拽的富文本编辑器二、实现功能支持浮动文本,图片,视频设计的编辑器支持输出符合w3c规范的html+css的编辑器支持段落左右边距拖动修改支持拖拉设计段落边距,视频大小的编辑器支持自定义字体图标样式插入的编辑器(可二次开发扩展更多图标)支持输出符合w3c标准化的html及css样式,跟executeCommandapi乱七八糟的修饰说拜拜支持插入/编辑流程图的富文本编辑器三、技术选型htmlcssjs四、界面展示    五、源码地址私信回复:富文本

50行代码用Vue实现可拖拽调节的分割布局

按住分割线调节比例实现并不难,但是网上其他的文章实在是把简单的事情复杂化了今天教大家的方法超级简洁!!!!只用50行代码!!当鼠标在分割线位置按下时triggerDragging变量变为true这时split-pane-wrapper的mousemove中判断triggerDragging如果为true则改变leftOffset,pane-left的width就会随之改变pane-trigger-con的width是固定的而pane-right采用了弹性布局的flex:1;使其填充剩余部分,填充部分适合用于网页的内容展示部分exportdefault{name:"Home",data(){re

vue2实现可拖拽甘特图(结合element-ui的gantt图)

一、前言 接到公司需求,要做一个可拖拽的甘特图来实现排期需求,官方的插件要付费还没有中文的官方文档可以看,就去找了各种开源的demo来看,功能上都不是很齐全,于是总结了很多demo,合在一起组成了一版较为完整的满足需求的甘特图。二、主要功能1.拖拽 拖拽功能是甘特图的主要功能,该demo实现了甘特图时间块上、下、左、右拖拽功能。2.排序拖拽后时间块进行排序,计算重叠区域大小确定插入位置。3.时间选择结合element-ui的日期时间选择器来确定时间轴。4.搜索 搜索已存在的时间块,并定位到相应位置。5.新建排期任务 使用element-ui的弹框以及表单新建成功的排期列表添加到排期任务中。6.

Unity用鼠标拖拽UI,UI跟随鼠标移动

Unity用鼠标拖拽UI,UI跟随鼠标移动效果一、原理二、源码总结💢💢版权声明效果先上效果一、原理继承几个拖拽的接口IBeginDragHandler,IDragHandler,IEndDragHandler计算下偏移量,转换下坐标系限制下可拖拽的范围,我设置的是canvas的大小二、源码usingSystem.Collections;usingSystem.Collections.Generic;usingUnity.VisualScripting;usingUnityEngine;usingUnityEngine.EventSystems;namespaceHHQ{//////拖拽ui(限

Vue 实现拖拽模块(一)拖拽添加组件

本文主要介绍了vue拖拽组件实现构建页面的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下本文主要介绍了Vue拖拽添加组件的简单实现,具体如下:效果图实现思路使用H5的新特性拖放操作来实现,拖拽左侧的组件放到右边主体部分,然后主体部分识别拖拽组件加载到盒子中拖拽事件和属性拖放操作的事件描述事件名称事件描述dragstart当单击下鼠标,并移动之后执行。drag在dragstart执行之后,鼠标在移动时连续触发。dragend当拖拽行为结束,也就是松开鼠标的时候触发。dragenter当正在拖拽的元素的标记进入某个Dom元素时触发,自身首先会触发。被进入的Dom元素会触发这个事件。d

element(-ui 和 -plus)的table实现拖拽排序

首先我要介绍一个超级好用的工具,sortablejs直接安装yarnaddsortablejs,后在自己的vue文件中引入就可以直接使用了首先提供elementplus和-ui的区别只在于传入Sortable的el。element-ui:‘.el-table__body-wrappertbody’element-plus:‘.el-table__bodytbody’rowDrop(){//tbody拿到你要去操作的拖拽元素的父节点consttbody=document.querySelector('.el-table__bodytbody',//.el-table__body-wrappert

Android 下拉拖拽关闭Activity,下拉返回Activity。仿大众点评、快手、小红书详情界面:可下滑关闭详情界面

Github链接,给个Star鼓励我写更多好库下拉拖拽关闭Activity,下拉返回Activity。仿大众点评、快手、小红书详情界面:可下滑关闭详情界面。功能(优点):✅Demo包含瀑布列表跳转到详情,带动画+详情可左滑进入个人主页+下拉拖拽关闭Activity✅到为了让Activity的xml布局层级最少,只需要把本库设置为最外层的RelativeLayout✅仿大众点评:下拉过程中除了图片,别的部分随着下拉距离而半透明✅仿快手:fling快速下滑也可触发关闭✅详情界面可左滑进入个人主页,你可以自己实现懒加载✅解决下拉返回ImageView闪一下问题✅完美解耦,可轻松让你的任何Activi

vue2 element ui 的表格使用 sortablejs 拖拽列遇到的问题和解决方案

项目使用 elementui的表格实现拖动表头可改变列的宽度,又使用sortablejs实现表格的列可拖拽到其他列的位置,导致出现如下的一些问题:1、某一列宽变大或变小后,只有当前列可拖拽,其他列无法拖拽。解决方案:在列宽发生改变后,销毁当前拖拽实例,再重新创建拖拽实例。this.sortDemo.destroy()此方法可查看sortablejs官网 Sortable.js中文网2、当表格没有横向滚动条时,某一列宽变大或变小时,其他列宽也会变大或变小。根因:表格的每一列设置了min-width,当表格没有横向滚动条时,某一列宽变大或变小时,min-width会把剩余宽度按比例分配给设置了mi

基于Opencv的虚拟拖拽项目

预备知识勾股定理跟随移动算法手势识别图解项目源代码"""演示一个简单的虚拟拖拽步骤:1、opencv读取视频流2、在视频图像上画一个方块3、通过mediapipe库获取手指关节坐标4、判断手指是否在方块上5、是,方块跟着移动6、完善:通过食指和中指指尖距离确定是否激活移动7、完善:画面显示FPS等信息"""importcv2importmath#导入mediapipe的相关模块#导入mediapipe:https://google.github.io/mediapipe/solutions/handsimportmediapipeasmpmp_drawing=mp.solutions.draw