分享一个功能强大的vue.js拖拽组件

stefan 发布于2019-08-26 11:34 / 810人阅读

摘要：介绍这是一个功能强大的可拖拽的组件。它可以自动滚动，锁定坐标系。支持拖拽时，流畅的动画效果。可以支持水平，垂直或者网格的拖拽。

介绍

vue-slicksort -- 这是一个功能强大的可拖拽的vue.js组件。它可以自动滚动，锁定坐标系。支持拖拽时，流畅的动画效果。可以支持水平，垂直或者网格的拖拽。支持触摸。

DEMO

安装

通过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;

在你的vue文件中这样引用

import Vue from "vue";
import { ContainerMixin, ElementMixin } from "vue-slicksort";

const SortableList = {
  mixins: [ContainerMixin],
  template: `
    
      
    
  `,
};

const SortableItem = {
  mixins: [ElementMixin],
  props: ["item"],
  template: `
    {{item}}
  `,
};

const ExampleVue = {
  name: "Example",
  template: `
    
      
        
      
    
  `,
  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),
});

组件参数

Property	Type	Default	Description
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	false	是否设置window为可滚动的容器
useWindowAsScrollContainer	Boolean	true	是否自动隐藏ghost元素
lockToContainerEdges	Boolean	false	是否对正在拖拽的元素锁定容器边缘
lockOffset	String	50%	对正在拖拽的元素锁定容器边缘的偏移量
shouldCancelStart	Function	-	在拖拽开始前这个方法将被调用
getHelperDimensions	Function	-	可选方法({node, index, collection}),用于返回SortableHelper的计算尺寸

轮子工厂--一个分享vue,angular优秀组件的网站

GPU云服务器云服务器拖拽组件组件拖拽分享组件一个好的防火墙应具备哪些功能

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107164.html

iView 发布 3.0 版本，以及开发者社区等 5 款新产品

摘要：相对时间组件锚点组件面板分割组件分割线组件单元格组件相对时间组件用于表示几分钟前几小时前等相对于此时此刻的时间描述。单元格组件在手机上比较常见，在上则常用于固定的侧边菜单项。开发者社区这是发布会最劲爆的一款产品了。 showImg(https://segmentfault.com/img/bVbeuj6?w=2864&h=1458); 7 月 28 日，我们成功地召开了 iView 3...

FreeZinG 2019-08-23 10:31 评论0 收藏0
手把手教你写vue裁切预览组件

摘要：版本裁切工具，包含预览功能最终效果源码地址第一步先用安装脚手架不会安装的看官网初始化第二步创建文件新建里新建，在配置访问路由具体看源码最终生成的文件结构如下图第三步注册组件引用所有插件导入插件入口文件如果已安装就跳过注册插件全 vue版本裁切工具，包含预览功能最终效果： https://qiuyaofan.github.io/vue-crop-demo/ 源码地址： https:/...

FreeZinG 2019-08-22 17:02 评论0 收藏0
观众老爷们，来试试这个用 Vue 撸的数据可视化后台吧

摘要：至于如何优雅地管理使用，再次祭出潘神的文章手摸手，带你优雅的使用掘金项目的后端接口文档我是用的进行的管理，其实有很多强大的功能，不仅仅是一个接口测试工具，接口文档管理就是其中一个。首先放个线上地址大家感受一下(由于后端用的是 leancloud 的免费套餐，因此可能会比较慢)： vue-data-board P.S. 建议大家尽量自己注册一个账号(可以随便填一个密码)，如果用默认的测...

JinB 2019-08-23 18:12 评论0 收藏0
前端每周清单：Node.js 微服务实践，Vue.js 与 GraphQL，Angular 组件技巧

摘要：前端每周清单第期微服务实践，与，组件技巧，攻防作者王下邀月熊编辑徐川前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。前端每周清单第 26 期：Node.js 微服务实践，Vue.js 与 GraphQL，Angular 组件技巧，HeadlessChrome 攻防作者：王下邀月熊编辑：徐川...

wall2flower 2019-08-21 11:55 评论0 收藏0
前端最实用书签(持续更新)

摘要：前言一直混迹社区突然发现自己收藏了不少好文但是管理起来有点混乱所以将前端主流技术做了一个书签整理不求最多最全但求最实用。前言一直混迹社区,突然发现自己收藏了不少好文但是管理起来有点混乱; 所以将前端主流技术做了一个书签整理,不求最多最全,但求最实用。书签源码书签导入浏览器效果截图showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 评论0 收藏0