vue-slicksort拖拽组件
$ npm install vue-slicksort --save
$ yarn add vue-slicksort
// Using an ES6 transpiler like Babel
import {ContainerMixin, ElementMixin} from 'vue-slicksort';// Not using an ES6 transpiler var slicksort = require('vue-slicksort'); var ContainerMixin = slicksort.ContainerMixin; var ElementMixin = slicksort.ElementMixin;
import Vue from 'vue';
import { ContainerMixin, ElementMixin } from 'vue-slicksort';const SortableList = {mixins: [ContainerMixin],template: `<ul class="list"> <slot /> </ul> `, }; const SortableItem = { mixins: [ElementMixin], props: ['item'], template: ` <li class="list-item">{{item}}</li> `, }; const ExampleVue = { name: 'Example', template: ` <div class="root"> <SortableList lockAxis="y" v-model="items"> <SortableItem v-for="(item, index) in items" :index="index" :key="index" :item="item"/> </SortableList> </div> `, components: { SortableItem, SortableList, }, data() { return { items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8'], }; }, }; const app = new Vue({ el: '#root', render: (h) => h(ExampleVue), });
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
value | Array | - | 列表的内容 |
axis | String | y | 列表元素可以被横向拖拽,纵向拖拽还是网格拖拽。用x,y,xy来表示。 |
lockAxis | String | - | 用于排序时在坐标系中锁定元素的移动 |
helperClass | String | - | helper的自定义样式类 |
transitionDuration | Number | 300 | 元素移动动画的持续时间 |
pressDelay | Number | 0 | 如果需要当元素被按下一段时间再允许拖拽,可以设置这个属性 |
pressThreshold | Number | 5 | 移动允许被忽略的阈值,单位是像素 |
distance | Number | 0 | 如果需要在拖拽出一定距离之后才被识别为正在拖拽的元素,可以设置这个属性 |
useDragHandle | Boolean | false | 如果使用HandleDirective,设置为true |
useWindowAsScrollContainer | Boolean | false | 是否设置window为可滚动的容器 |
hideSortableGhost | Boolean | true | 是否自动隐藏ghost元素 |
lockToContainerEdges | Boolean | false | 是否对正在拖拽的元素锁定容器边缘 |
lockOffset | String | 50% | 对正在拖拽的元素锁定容器边缘的偏移量 |
shouldCancelStart | Function | - | 在拖拽开始前这个方法将被调用 |
getHelperDimensions | Function | - | 可选方法({node, index, collection}),用于返回SortableHelper的计算尺寸 |
名称 | 参数 | 说明 |
---|---|---|
sortStart | event, node, index, collection | 当拖拽开始时触发 |
sortMove | event | 当拖拽时鼠标移动时触发 |
sortEnd | event, newIndex, oldIndex, collection | 当拖拽结束时触发 |
input | newList | 当拖拽结束后产生新的列表时触发 |
转载于:https://www.cnblogs.com/zzsdream/p/10845430.html
vue-slicksort拖拽组件相关推荐
- html 树形图可拖拽,HTML5拖拽API实现vue树形拖拽组件
因业务场景需要一个可拖拽修改节点位置的树形组件,因此动手撸了一个,乘此机会摸了一把html5原生拖拽.近期有时间将核心部分代码抽出,简单说下实现方式. 1.树形结构-组件递归使用 树形结构非常简单,t ...
- vue可视化拖拽组件模板_基于 Vue 丝滑般拖拽排序组件VueSlicksort
今天给大家分享一个功能超强的自由拖拽排序组件VueSlicksort. vue-slicksort 一款功能强大的可拖拽的vue.js组件.拥有丝滑般拖拽动画效果,支持水平/垂直/网格拖拽排序.还可以 ...
- vue可视化拖拽组件模板,vue自定义下拉框组件
怎样利用Vue动态生成form表单 . $formCreate参数rules 表单生成规则[inputRule,selectRule,...]options 初始化配置参数(详细见底部createOp ...
- vue拖拽组件生成页面代码,vue可视化拖拽组件模板
怎么使用vuedraggable实现简单的拖拽,只拖拽一个内容(div) . 仔细观察发现,今日头条导航部分编辑效果,有以下几个效果1:点击编辑开启可以编辑的效果(也就是是否开启拖拽)2:拖拽前选中效 ...
- vue可视化拖拽组件模板,vue组件拖拽自定义界面
前端可视化开发平台哪个好用? ThingJS 基于 HTML5 和 WebGL 技术,可方便地在主流浏览器上进行浏览和调试,支持 PC 和移动设备. ThingJS 为可视化应用提供了简单.丰富的功能 ...
- vue 可拖拽组件的实现
废话不多说,直接上代码 <template><divclass="discussIcon"ref="discussIcon"@touchsta ...
- vue列表拖拽组件 vue-dragging
安装 $ npm install awe-dnd --save 应用 在main.js中,通过Vue.use导入插件 import VueDND from 'awe-dnd'Vue.use(VueDN ...
- 手机端适用:vue列表拖拽组件 vue-dragging
//安装 $ npm install awe-dnd --save //应用 //在main.js中,通过Vue.use导入插件 import VueDND from 'awe-dnd'Vue.use ...
- Vue 实现拖拽模块(二)自定义拖拽组件位置
上文介绍了 拖拽添加组件 的简单实现,本文将继续给大家分享如何自定义拖拽组件位置的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下 本文主要介绍了 Vue自定义拖拽组件位置的简单实现,具体 ...
- Vue 实现拖拽模块(三)自定义拖拽组件的样式
上文介绍了 自定义拖拽组件位置 的简单实现,本文将继续给大家分享如何自定义拖拽组件位置的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下 本文主要介绍了 Vue 自定义拖拽组件的样式,具体 ...
最新文章
- 解决360浏览器偶发性会闪屏一下黑色的背景
- java判断ftp是否连接_校验FTP是否能正常连接的Java类
- JetBrains放出Java代码质量检查工具Qodana,不了解一下?
- 简明python教程购买-自学Python买什么书?
- 用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
- python源码用于查找指定具有相同内容的文件
- ELK三件套安装实践之路(1)
- windows 文件名太长无法删除的解决方法
- struts1.x心得1--struts入门介绍
- DemocracyOS促进双方的公民参与
- Alex 的 Hadoop 菜鸟教程: 第19课 华丽的控制台 HUE 安装以及使用教程
- 《Java编程思想第五章》:初始化与内存
- 《上瘾》学习笔记(第一、二章)
- 太原理工大学系统分析与设计实验报告实验室设备_“艺术之光”绽放太原理工大学首届本科生专业节...
- LED Designing
- VVC/JEM代码学习26:m_pcTrQuant-transformN*N
- 杭州个人小客车摇号百分之百中签率所需要的时间预测和阶梯摇号概率提升
- 手机摄影技巧总结——永远拍出美美的照片
- 前序遍历,中序遍历,后序遍历详解
- [参考]C# JSON字符串序列化与反序列化
热门文章
- QT4.8.5 显示中文
- 嵌入式gdbserver远程调试【原创】
- 防抖、节流(细讲)【面试】
- nodejs 生成证书 和 wss server
- 【flink】Flink 1.12.2 源码浅析 : yarn-per-job模式解析 yarn 提交过程解析
- 【java】java JVM问题定位的典型案例分析 笔记 finalizer
- 【Elasticsearch】es shard split 使用分析
- 【java】java 的网络地址类 InetSocketAddress
- 【ElasticSearch】Es 源码之 IndicesModule 源码解读
- 【Spark】Spark 2.4 Stream 读取kafka 写入kafka