Vue.Draggable使用文档超详细总结

目录
  • 前言
  • 特性
  • 安装
  • 引入
  • 基础用法
  • 属性
  • options配置项
  • 事件
  • 插槽
    • Header
    • Footer
  • 总结

前言

Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。

关于Vue.Draggable详细信息可以查看github地址

特性

  • 支持触摸设备
  • 支持拖拽和选择文本
  • 支持智能滚动
  • 支持不同列表之间的拖拽
  • 不以jQuery为基础
  • 和视图模型同步刷新
  • 和vue2的国度动画兼容
  • 支持撤销操作
  • 当需要完全控制时，可以抛出所有变化
  • 可以和现有的UI组件兼容

安装

npm install vuedraggable

引入

import draggable from 'vuedraggable'

基础用法

定义一个json串 list，实现它的拖拽排序。

<draggable v-model="list">
    <transition-group>
        <div v-for="element in list" :key="element.id">
            {{element.name}}
        </div>
    </transition-group>
</draggable>

属性

参数 说明 类型 默认值
value 用于实现拖拽的list，通常和内部v-for循环的数组为同一数组 Array null
list 效果同value的。和v-model不能共用 Array null
tag draggable 标签在渲染后展现出来的标签类型 String div
options draggable 列表配置项 Object null
emptyInsertThreshold 拖动时，鼠标必须与空的可排序对象之间的距离 Number 5
clone 返回值为true时克隆，可以理解为正常的拖拽变成了复制。当pull:'clone时的拖拽的回调函数’ Function 无处理
move 如果不为空，这个函数将以类似于Sortable onMove回调的方式调用。返回false将取消拖动操作。 Function null
componentData 用来结合UI组件的，可以理解为代理了UI组件的定制信息 Object null

注意：vuedraggable新版本废弃了options属性，建议使用v-bind属性作为配置项

options配置项

参数 说明 类型
group 用于分组，同一组的不同list可以相互拖动 String/Array
sort 定义是否可以拖拽 Boolean
delay 定义鼠标选中列表单元可以开始拖动的延迟时间 Number
disabled 定义是否此sortable对象是否可用 Boolean
animation 动画时间 单位:ms Number
handle 使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动 Selector
filter 定义哪些列表单元不能进行拖放，可设置为多个选择器，中间用“，”分隔 Selector
preventOnFilter 当拖动filter时是否触发event.preventDefault() 默认触发 Boolean
draggable 定义哪些列表单元可以进行拖放 Selector
ghostClass 当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况，此配置项就是来给这个影子单元添加一个class Selector
chosenClass 目标被选中时添加 Selector
dragClass 目标拖动过程中添加 Selector
forceFallback 如果设置为true时，将不使用原生的html5的拖放，可以修改一些拖放中元素的样式等 Boolean
fallbackClass： 当forceFallback设置为true时，拖放过程中鼠标附着单元的样式 String
dataIdAttr data-id Selector
scroll 当排序的容器是个可滚动的区域，拖放可以引起区域滚动 Boolean
scrollFn 用于自定义滚动条的适配 Function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl)
ScrollSensitivity 就是鼠标靠近边缘多远开始滚动默认30 Number
scrollSpeed 滚动速度 Number

事件

参数 说明 回调参数
start 开始拖动时的回调函数 function（{to,from,item,clone,oldIndex,newIndex})
add 添加单元时的回调函数 function（{to,from,item,clone,oldIndex,newIndex})
remove 单元被移动到另一个列表时的回调函数 function（{to,from,item,clone,oldIndex,newIndex})
update 排序发生变化时的回调函数 function（{to,from,item,clone,oldIndex,newIndex})
end 拖动结束时的回调函数 function（{to,from,item,clone,oldIndex,newIndex})
choose 选择单元时的回调函数 function（{to,from,item,clone,oldIndex,newIndex})
sort 排序发生变化时的回调函数 function（{to,from,item,clone,oldIndex,newIndex})
filter 尝试选择一个被filter过滤的单元的回调函数 function（{to,from,item,clone,oldIndex,newIndex})
clone clone时的回调函数 function（{to,from,item,clone,oldIndex,newIndex})

插槽

页眉或页脚插槽都不能与 tarnstion-group 一起使用。

Header

使用标题插槽在vuedraggable组件中添加不可拖动的元素。它应该与draggable选项一起使用来标记draggable元素。请注意，无论标题槽在模板中的位置如何，它总是被添加到默认槽之前。

<draggable v-model="myArray" draggable=".item">
    <div v-for="element in myArray" :key="element.id" class="item">
        {{element.name}}
    </div>
    <button slot="header" @click="addPeople">Add</button>
</draggable>

Footer

使用页脚槽在vuedraggable组件中添加不可拖动的元素。它应该与draggable选项一起使用，以标记draggable元素。请注意，无论页脚槽在模板中的位置如何，它都将始终添加到默认槽之后。

<draggable v-model="myArray" draggable=".item">
    <div v-for="element in myArray" :key="element.id" class="item">
        {{element.name}}
    </div>
    <button slot="footer" @click="addPeople">Add</button>
</draggable>

总结

到此这篇关于Vue.Draggable使用文档超的文章就介绍到这了,更多相关Vue.Draggable使用文档内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue如何实现拖动图片进行排序Vue.Draggable

    vue如何实现拖动图片进行排序Vue.Draggable

    目录 拖动图片进行排序Vue.Draggable 下面是实现过程 项目draggable拖拽移动图片顺序 第一步.导入 第二步.组件引入 第三步.定义组件 第四步.页面中使用 拖动图片进行排序Vue.Draggable 好久没接触vue的项目了,最近接到一个vue图片处理的小项目,有一项需求是要实现拖动图片就行排序. 接到这个需求之后立马想到了Vue.Draggable这款基于Sortable.js实现的vue拖拽插件 下面是实现过程 第一步:安装Vue.Draggable.两种方式npm和ya

  • Vue.Draggable拖拽功能的配置使用方法

    本文实例为大家分享了Vue.Draggable拖拽功能的具体代码,供大家参考,具体内容如下 使用cmd命令在项目根目录下下载安装Vue.Draggable npm install vuedraggable 在组件中需要使用的引入 import draggable from 'vuedraggable' 注册组件 components:{ draggable } vue的template代码如 <draggable v-model="itemlis" //开始移动方法 :move=

  • Vue.Draggable实现交换位置

    Vue.Draggable实现交换位置

    Vue.Draggable实现交换位置,供大家参考,具体内容如下 前言 最近的一个项目接触了到了Vue.Draggable这个组件.不过我们的需求和Vue.Draggable这个组件所支持的有些出入.这个拖拽组件属于插入的模式.一但拖拽的是相间的元素(中间隔着几个元素),那么拖拽元素就会占据被拖拽元素的位置,而后续元素位置逐级向下减一. 如下图: c拖拽到a的位置,表现为c插入到a的前面.所以变为了cab. 需求 实现交换而非插入及上图要变成(cba) 实现方式 想要阻止它插入是不可能,我们只能

  • Vue.Draggable实现拖拽效果

    快速实现Vue.Draggable的拖拽效果,供大家参考,具体内容如下 1.下载包:npm install vuedraggable 配置:package.json "dependencies": { "element-ui": "^1.3.4", "less": "^2.7.2", "less-loader": "^4.0.4", "vue":

  • vue.draggable实现表格拖拽排序效果

    本文实例为大家分享了vue.draggable实现表格拖拽排序效果展示的具体代码,供大家参考,具体内容如下 主要使用vuedraggable和sortablejs两个组件. 1.安装组件 npm install vuedraggable npm install sortablejs 2.引入组件 import draggable from 'vuedraggable'; import Sortable from 'sortablejs'; export default { components:

  • Vue.Draggable使用文档超详细总结

    目录 前言 特性 安装 引入 基础用法 属性 options配置项 事件 插槽 Header Footer 总结 前言 Draggable为基于Sortable.js的vue组件,用以实现拖拽功能. 关于Vue.Draggable详细信息可以查看github地址 特性 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2的国度动画兼容 支持撤销操作 当需要完全控制时,可以抛出所有变化 可以和现有的UI组件兼容 安装 npm

  • vue中使用vuex的超详细教程

    vue中使用vuex的超详细教程

    目录 一.适合初学者使用,保存数据以及获取数据 二.模块化(适合有部分基础的人) vuex是使用vue中必不可少的一部分,基于父子.兄弟组件,我们传值可能会很方便,但是如果是没有关联的组件之间要使用同一组数据,就显得很无能为力,那么vuex就很好的解决了我们这种问题,它相当于一个公共仓库,保存着所有组件都能共用的数据. 那么,我们一起来看看vue项目怎么使用它吧.(如果你对vuex有一定了解,不是刚接触的小白,请忽略第一步,直接查看第二步) 一.适合初学者使用,保存数据以及获取数据 1.在sto

  • 实现Vue的markdown文档可以在线运行的方法示例

    markdown 文档中Vue代码 可执行啦,而且可以边看边执行.这样就可以用markdown文档的形式,写自己的Vue博客了, 可以方便介绍自己的原创组件,很酷的执行. Github https://github.com/zhangKunUserGit/vue-markdown-run DEMO https://zhangkunusergit.github.io/vue-markdown-run/dist/ 安装 npm install vue-markdown-run --save 用法 (

  • vue实现pdf文档在线预览功能

    vue实现pdf文档在线预览功能

    针对android系统不支持pdf文档在线预览,可通过引入pdf.js插件实现,其具体实现步骤如下 一.引入插件 方式一:npm install --save pdfjs-dist,安装完成后在vue项目的node_modules出现如下依赖 方式二:只引入pdf.js的核心文件pdf.js和pdf.work.js,其他无关的文件全部删除,如图 方式三:将插件直接放在static文件夹下,如图 二.前端页面代码 方式一和方式二:特点精简 <template> <div> <c

  • 使用VitePress搭建及部署vue组件库文档的示例详解

    使用VitePress搭建及部署vue组件库文档的示例详解

    目录 安装vitepress 目录结构 文档首页 配置 导航栏配置 侧边栏 部署到GitHub Pages 每个组件库都有它们自己的文档.所以当我们开发完成我们自己的组件库必须也需要一个组件库文档.如果你还不了解如何搭建自己的组件库可以看这里->从零搭建Vue3组件库.看完这篇文章你就会发现原来搭建和部署一个组件库文档是那么的简单.当然部署也不需要你有自己的服务器,你只要有github即可.由于我们的组件库还没有完成,所以下面就以element-plus作为示例来搭建一个文档吧. 安装vitep

  • 解析如何自动化生成vue组件文档

    解析如何自动化生成vue组件文档

    目录 一.现状 二.社区解决方案 2.1.业务梳理 三.技术方案 3.1.Vue文件解析 3.2.信息提取 3.2.1.可直接获取的信息 3.2.2.需要约定的信息 四.总结 五.展望 一.现状 Vue框架在前端开发中应用广泛,当一个多人开发的Vue项目经过长期维护之后往往会沉淀出很多的公共组件,这个时候经常会出现一个人 开发了一个组件而其他维护者或新接手的人却不知道这个组件是做什么的.该怎么用,还必须得再去翻看源码,或者压根就没注意到这个组件 的存在导致重复开发.这个时候就非常需要维护对应的组

  • Vue组件文档生成工具库的方法

    Vue组件文档生成工具库的方法

    目录 解析.vue 文件 提取文档信息 提取组件名称.描述.props.methods.model 提取描述 提取 methods 提取 props 提取 model 提取组件Events 提取组件Slots 结语 程序员最讨厌的两件事情,第一种是写文档,另一种是别人没有写文档.有没有直接根据vue组件生成文档的呢?当然是有的的.但第三方使用起来不一定能和现有项目结合使用,往往需要额外的注释用来标记提取信息.使用第三方的一些比较常见问题 文档提取信息不全面,可能有些信息你需要提取但是它又不支持.

  • 详解vue axios中文文档

    axios中文文档 在用Vue做开发的时候,官方推荐的前后端通信插件是axios,Github上axios的文档虽然详细,但是却是英文版.现在发现有个axios的中文文档,于是就转载过来了! 原文地址 : https://github.com/mzabriskie/axios 简介 版本:v0.16.1 基于http客户端的promise,面向浏览器和nodejs 特色 浏览器端发起XMLHttpRequests请求 node端发起http请求 支持Promise API 拦截请求和返回 转化请

  • asp 读取 utf-8格式文档并生成utf-8格式文档的乱码问题

    今天在对搜索吧的程序进行utf-8修正时,发现生成的utf-8格式文档存在着乱码,原来文件 create_html.asp代码如下: 复制代码 代码如下: <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>  <%  set objrs=server.createObject("Scripting.FileSystemObject")  conn=server.mappath("exam

  • 如何使用C#从word文档中提取图片

    如何使用C#从word文档中提取图片

    图片和文字是word文档中两种最常见的对象,在微软word中,如果我们想要提取出一个文档内的图片,只需要右击图片选择另存为然后命名保存就可以了,今天这篇文章主要是实现如何使用C#从word文档中提取图片. 这里我准备了一个含有文字和图片的word文档: 详细步骤与代码: 步骤1 : 添加引用. 新建一个Visual C#控制台项目,添加引用并使用如下命名空间: using System; using Spire.Doc; using Spire.Doc.Documents; using Spir

随机推荐