draggable 总结
样式控制:
可以拖拽元素设置
draggable=".drawing-item"可以拖动的组::group="{ name: 'componentsGroup', pull: 'clone', put: false }"<draggableclass="components-draggable":list="item.list":group="{ name: 'componentsGroup', pull: 'clone', put: false }":clone="cloneComponent"draggable=".components-item":sort="false"@end="onEnd"/>接收被拖动过来的数据:<draggableclass="col row content-start drawing-board":list="drawingList":animation="340":clone="cloneComponent"group="componentsGroup"/>
事件控制
添加时:
onAdd={()=> {config.children.forEach(c=>{if(c) c.config.span='grow'; else console.log('------',config.children);})}}移动时:
move={(e,originalEvent)=> {console.log('xxx',e,originalEvent);return false;}} 点击时:
onClick={(event) => { activeItem(activeData); event.stopPropagation(); }}
常用属性设置
属性名称 | 说明 |
---|---|
group | :group= "name",相同的组之间可以相互拖拽 |
sort | :sort= "true",是否开启内部排序,如果设置为false,它所在组无法排序,在其他组可以拖动排序 |
delay | :delay= "0", 鼠标按下后多久可以拖拽 |
touchStartThreshold | 鼠标移动多少px才能拖动元素 |
disabled | :disabled= "true",是否启用拖拽组件 |
animation | 拖动时的动画效果,还是很酷的,数字类型。如设置animation=1000表示1秒过渡动画效果 |
handle | :handle=".mover" 只有当鼠标移动到css为mover类的元素上才能拖动 |
filter | :filter=".unmover" 设置了unmover样式的元素不允许拖动 |
draggable | :draggable=".item" 那些元素是可以被拖动的 |
ghostClass | :ghostClass="ghostClass" 设置拖动元素的占位符类名,你的自定义样式可能需要加!important才能生效,并把forceFallback属性设置成true |
chosenClass | :ghostClass="hostClass" 被选中目标的样式,你的自定义样式可能需要加!important才能生效,并把forceFallback属性设置成true |
dragClass | :dragClass="dragClass"拖动元素的样式,你的自定义样式可能需要加!important才能生效,并把forceFallback属性设置成true |
dataIdAttr | dataIdAttr: 'data-id' |
forceFallback | 默认false,忽略HTML5的拖拽行为,因为h5里有个属性也是可以拖动,你要自定义ghostClass chosenClass dragClass样式时,建议forceFallback设置为true |
fallbackClass | 默认false,克隆的DOM元素的类名 |
allbackOnBody | 默认false,克隆的元素添加到文档的body中 |
fallbackTolerance | 拖拽之前应该移动的px |
scroll | 默认true,有滚动区域是否允许拖拽 |
scrollFn | 滚动回调函数 |
scrollSensitivity | 距离滚动区域多远时,滚动滚动条 |
scrollSpeed | 滚动速度 |
draggable 总结相关推荐
- Vue.Draggable 实现组件拖拽
Vue.Draggable 实现组件拖拽 特性 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2的国度动画兼容 支持撤销操 ...
- jQuery UI 拖动(Draggable) - 延迟开始
定义和用法 通过 delay 选项设置延迟开始拖拽的毫秒数.通过 distance 选项设置光标被按下且拖拽指定像素后才允许拖拽 示例 <!DOCTYPE html> <html&g ...
- EasyUI中拖动draggable的使用
场景 EasyUI环境搭建与入门基础语法: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/90760947 效果 实现 在weba ...
- jQuery UI resizble、draggable的div包含iframe导致缩放和拖拽的不平滑解决方法
前言 不仅仅是jQuery UI resizble的div包含iframe会导致缩放的不平滑,draggable也会出现包含iframe会导致拖放的不平滑,但是因为jQuery UI有为draggab ...
- vuedraggable自由拖拽html,vue中draggable拖拽列表的使用
1.安装 npm install vuedraggable 或者使用镜像安装 cnpm install vuedraggable 2.使用 首先在使用的组件中引入 import draggable f ...
- 让 jQuery UI draggable 适配移动端
背景: 在移动端,本人要实现对某个元素的拖动,想到使用 jQuery UI 的 draggable 功能.但是发现此插件的拖动只支持PC端,不支持移动端. 原因: 原始的 jQuery UI 里,都是 ...
- jquery.ui.draggable中文文档jquery 自由拖拽类~study~
为什么80%的码农都做不了架构师?>>> JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动. Draggable的元素受影响css: ui-dragg ...
- vue Draggable实现拖动改变顺序
npm install vuedraggable import draggable from 'vuedraggable' 示例代码 Test.vue <template><ul c ...
- Vue.Draggable拖拽功能的配置和使用方法
使用cmd命令在项目根目录下下载安装Vue.Draggable npm install vuedraggable 在组件中需要使用的引入 import draggable from 'vuedragg ...
- draggable禁止拖动_通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽...
前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...
最新文章
- 荣耀总裁赵明:AI 是核心战略,全球前五的目标不会变
- 运算放大器在强电磁干扰下会出现什么变化?
- springMVC项目在jboss7中配置应用自己的log4j--转载
- 如何删除有病毒的网站?
- Match Points
- C#EXCEL 操作类--C#DataToExcel帮助类
- Python字典二次开发实现稀疏矩阵表示与简单计算
- IO中同步、异步与阻塞、非阻塞的区别
- 鸿蒙系统正式面世,跨时代!“鸿蒙”系统正式面世!余承东:如有必要随时可替代安卓...
- pytorch 神经网络构造
- mysql innodb数据库引擎_mysql的innodb数据库引擎详解
- linux rtl8723bu 蓝牙,RTL8723DS蓝牙问题分析
- 材料成型计算机仿真技术,材料成型计算机模拟分析(各种仿真软件介绍).ppt
- 嵌入式数据结构以及算法(数据结构篇)
- DNS到底是干什么用的
- 企业高管和高收入人群必读的税务筹划策略!
- 将福昕高级PDF编辑器中创建的PDF签名导出,迁移到其他电脑并导入福昕PDF中
- 字节跳动后端面经(18)
- “当前不会命中断点。还没有为该文档加载任何符号“解决方案
- 你管这叫操作系统源码(一)