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 | 当拖拽结束后产生新的列表时触发 |
vue-slicksort拖拽组件的更多相关文章
- Vue 可拖拽组件 Vue Smooth DnD 详解和应用演示
本文发布自 https://www.cnblogs.com/wenruo/p/15061907.html 转载请注明出处. 简介和 Demo 展示 最近需要有个拖拽列表的需求,发现一个简单好用的 Vu ...
- vue实现拖拽组件
可以拖拽,靠边停靠,效果图如下 代码如下: 注意:代码中使用的图片未上传 DragAndDrop组件: <template> <div class="drag" ...
- vue列表拖拽组件 vue-dragging
安装 $ npm install awe-dnd --save 应用 在main.js中,通过Vue.use导入插件 import VueDND from 'awe-dnd' Vue.use(VueD ...
- Vue.Draggable:基于 Sortable.js 的 Vue 拖拽组件使用中遇到的问题
Sortable.js 介绍 https://segmentfault.com/a/1190000008209715 项目中遇到的问题: A - 我需要在项目的拖拽组件中,使用背景 1 - 想到的第一 ...
- vue拖拽组件开发
vue拖拽组件开发 创建临时vue项目 先查看node和npm版本,怎么安装就不多多bb了 再安装vue-cli npm install vue-cli -g //全局安装 vue-cli 检测是否安 ...
- vue自由拖拽、缩放组件
github地址:https://github.com/kirillmurashov/vue-drag-resize 安装: npm i -s vue-drag-resize 使用: <temp ...
- Vue-Grid-Layout分享一款好用的可拖拽组件
在使用Grafana的过程中,发现Grafana关于视图页面中每一个面板都可拖拽,可随意放大放小,体验非常棒,F12看了Grafana的代码,看打包后的代码很像react,进一步css,看到有grid ...
- React拖拽组件Dragact V0.1.7:教你优化React组件性能与手感
仓库地址:Dragact手感丝滑的拖拽布局组件 预览地址:支持手机端噢- 上回我们说到,Dragact组件已经进行了一系列的性能优化,然而面对大量数据的时候,依旧比较吃力,让我们来看看,优化之前的Dr ...
- Vue实现拖拽穿梭框功能四种方式
一.使用原生js实现拖拽 点击打开视频讲解更加详细 <html lang="en"> <head> <meta charset="UTF-8 ...
随机推荐
- NoClassDefFoundError错误发生的原因
今上午项目怎么也起不来,总报这个错,上网查一下,大概解释如下:NoClassDefFoundError错误的发生,是因为Java虚拟机在编译时能找到合适的类,而在运行时不能找到合适的类导致的错误.例如 ...
- vuex 全局store,前后端交互
1.监听input输入框 titleHandler <div> <!-- 监听input输入框 titleHandler--> <input type="tex ...
- 使用UEditor 报错Cannot read property 'nodeType' of undefined 解决办法
报如下错误 解决办法: //对编辑器的操作最好在编辑器ready之后再做 ue.ready(function() { }) <!-- 实例化编辑器 --> <script type= ...
- GeoJSON与GeoBuf互相转换
GeoJSON格式通常比较大,网页需要较长时间加载,可以使用GeoBuf进行压缩. 使用GeoBuf有很多好处:结构紧凑.文件小.方便编码和解码.能适用各种GeoJSON等等. 使用: 1.安装 ge ...
- File类的createNewFile()和mkdirs() mkdir()
createNewFile文件不存在则创建,存在则不创建并返回false,文件路径必须存在才可创建路径下的文件(注意它只能创建文件,即如果你给了/storage/emulated/0/hello/sn ...
- C# 使用递归获取所有下属、所有子部门……
本例中获取的是所有的晚辈!首先定义家庭成员类: public class FamilyMember { /// <summary> /// 身份 /// </summary> ...
- 微信小程序的分享功能-css文字超过两行隐藏
.info{ width:100px; word-break:break-all; display:-webkit-box; -webkit-box-orient:vertical; -webkit- ...
- P4163 [SCOI2007]排列——next_permutation
P4163 [SCOI2007]排列 注意要排序: next_permutation prev_permutation #include<cstdio> #include<cstri ...
- dubbo+zookeeper示例记录
提示:要直接看搭建例子的可以跳到 三 一.项目架构的发展 传统的mvc架构项目将整个系统功能实现全部写在一个项目中,部署在一个机器上,随着用户量的增涨,单个项目服务器无法承受暴增的用户请求时需要增加服 ...
- Tkinter 之主窗口参数
一.常用参数 语法 作用 window= tk.TK() 创建窗口 window['height'] = 300 设置高 window['width'] = 500 设置宽 window.title( ...