当前位置:首页 > 技术文档 > 正文内容

Vue.Draggable使用文档总结

admin5年前 (2020-09-11)技术文档1524

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循环的数组为同一数组Arraynull
list效果同value的。和v-model不能共用Arraynull
tagdraggable 标签在渲染后展现出来的标签类型Stringdiv
optionsdraggable 列表配置项Objectnull
emptyInsertThreshold拖动时,鼠标必须与空的可排序对象之间的距离Number5
clone返回值为true时克隆,可以理解为正常的拖拽变成了复制。当pull:'clone时的拖拽的回调函数’Function无处理
move如果不为空,这个函数将以类似于Sortable onMove回调的方式调用。返回false将取消拖动操作。Functionnull
componentData用来结合UI组件的,可以理解为代理了UI组件的定制信息Objectnull

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

options配置项

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

扫描二维码推送至手机访问。

版权声明:本文由云河空间发布,如需转载请注明出处。

本文链接:https://yuyunhe.cn/index.php/post/305.html

分享给朋友:

“Vue.Draggable使用文档总结” 的相关文章

php登录函数login session+mysql

<?php // 为php和mysql剔除不安全html代码。 //http://blog.ddian.cn function safestrip($string){    $string = strip_tags(...

php无限分类-总结

//php代码部分  <?php         header('Content-Type:text/html;charset=utf-8');    ...

git的几个小技巧

git的几个小技巧

分享git的几个小技巧,后面会根据使用补充。目前包括git撤销本地修改、git回退到前n个版本、git多用户提交冲突解决、git 命令简化。欢迎大家补充^_*1、git撤销本地修改 Java git reset --hard origin/ma...

ThinkPHP分页的实现

分页类需要和查询相结合,我们可以使用ThinkPHP自带的limit方法或者page方法,目的就是为了获取当前分页的数据(也有先获取完整数据然后前端分页显示的方法,不在本文描述内容中,也不建议)。使用limit方法或者page方法是和数据库类型无关的。我们首先在数据库里面创建一个think_data...

jQuery编程的最佳实践

加载jQuery1.坚持使用CDN来加载jQuery,这种别人服务器免费帮你托管文件的便宜干嘛不占呢。点击查看使用CDN的好处,点此查看一些主流的jQuery CDN地址。<script type="text/javascript" src="...

PHP利用Curl模拟登录并获取数据例子

PHP利用Curl模拟登录并获取数据例子

几乎所有的程序员来模仿用户登录或抓取数据都会使用到curl函数,下面我来给各位介绍利用curl函数实现登录并抓取数据,希望下面例子对各位有帮助。PHP的curl()在抓取网页的效率方面是比较高的,而且支持多线程,而file_get_contents()效率就要稍低些,当然,使用curl时需要开启下c...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。