vue-slicksort拖拽组件
安装
通过npm安装
$ npm install vue-slicksort --save
通过yarn安装
$ 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拖拽组件的更多相关文章

  1. Vue 可拖拽组件 Vue Smooth DnD 详解和应用演示

    本文发布自 https://www.cnblogs.com/wenruo/p/15061907.html 转载请注明出处. 简介和 Demo 展示 最近需要有个拖拽列表的需求,发现一个简单好用的 Vu ...

  2. vue实现拖拽组件

    可以拖拽,靠边停靠,效果图如下 代码如下: 注意:代码中使用的图片未上传 DragAndDrop组件: <template> <div class="drag" ...

  3. vue列表拖拽组件 vue-dragging

    安装 $ npm install awe-dnd --save 应用 在main.js中,通过Vue.use导入插件 import VueDND from 'awe-dnd' Vue.use(VueD ...

  4. Vue.Draggable:基于 Sortable.js 的 Vue 拖拽组件使用中遇到的问题

    Sortable.js 介绍 https://segmentfault.com/a/1190000008209715 项目中遇到的问题: A - 我需要在项目的拖拽组件中,使用背景 1 - 想到的第一 ...

  5. vue拖拽组件开发

    vue拖拽组件开发 创建临时vue项目 先查看node和npm版本,怎么安装就不多多bb了 再安装vue-cli npm install vue-cli -g //全局安装 vue-cli 检测是否安 ...

  6. vue自由拖拽、缩放组件

    github地址:https://github.com/kirillmurashov/vue-drag-resize 安装: npm i -s vue-drag-resize 使用: <temp ...

  7. Vue-Grid-Layout分享一款好用的可拖拽组件

    在使用Grafana的过程中,发现Grafana关于视图页面中每一个面板都可拖拽,可随意放大放小,体验非常棒,F12看了Grafana的代码,看打包后的代码很像react,进一步css,看到有grid ...

  8. React拖拽组件Dragact V0.1.7:教你优化React组件性能与手感

    仓库地址:Dragact手感丝滑的拖拽布局组件 预览地址:支持手机端噢- 上回我们说到,Dragact组件已经进行了一系列的性能优化,然而面对大量数据的时候,依旧比较吃力,让我们来看看,优化之前的Dr ...

  9. Vue实现拖拽穿梭框功能四种方式

    一.使用原生js实现拖拽 点击打开视频讲解更加详细 <html lang="en"> <head> <meta charset="UTF-8 ...

随机推荐

  1. prometheus-alertmanager告警推送到钉钉

    1. Prometheus告警简介 告警能力在Prometheus的架构中被划分成两个独立的部分.如下所示,通过在Prometheus中定义AlertRule(告警规则),Prometheus会周期性 ...

  2. hive表的DDL

    查看表            hive> show tables;创建表            hive> create table t1(id int);查看表结构           ...

  3. 三十四.MySQL主从同步 、主从同步模式

    mysql51:192.168.4.51 主 mysql52:192.168.4.52 从 mysql50:192.168.4.50 客户机   1.MySQL一主一从   1.1 51,52 安装m ...

  4. 【算法】变邻域搜索算法(Variable Neighborhood Search,VNS)超详细一看就懂的解析

    更多精彩尽在微信公众号[程序猿声] 变邻域搜索算法(Variable Neighborhood Search,VNS)一看就懂的解析 00 目录 局部搜索再次科普 变邻域搜索 造轮子写代码 01 局部 ...

  5. Centos7 安装php7.3 并扩展 MySQL、postgresql

    首先是安装需要的扩展文件 yum -y install freetype-devel yum -y install libpng-devel yum -y install libjpeg-devel ...

  6. Ubuntu输入ifconfig找不到IP地址,只有lo问题

    首先我的问题是这样的 然后一顿神百度,要找到你之前用的网卡或者设备,ifconfig -a,然后好用,出来了 但是并没有IP地址什么的,网上给的重启命令也没有用 输入的命令是:ifconfig ens ...

  7. (7)打造简单OS-加载内核

    一.简要说明 我们在第五讲[(5)打造简单OS-进入保护模式]中的mbr.S 汇编文件有段这样的代码 mov eax, 0x2 ; 起始扇区lba地址,从间隔第二个扇区开始 mov bx, 0x900 ...

  8. (2)打造简单OS-开机BIOS初始化与MBR操作系统引导详解

    ================大概了解即可=============== 1.BIOS的工作: 我们的计算机在开机之前,它是一个纯硬件的机器,但是从按下开机按钮的那一刻起,ROM上的固化程序就开始为 ...

  9. 10月清北学堂培训 Day 2

    今天是杨溢鑫老师的讲授~ T1 物理题,不多说(其实是我物理不好qwq),注意考虑所有的情况,再就是公式要推对! #include<bits/stdc++.h> using namespa ...

  10. 【02NOIP提高组】均分纸牌

    #include<bits/stdc++.h> using namespace std; ; int n,sum,a[maxn]; int main() { ; cin>>n; ...