Vue 拖拽组件(Draggable)

老牧童 • 2023-10-16 12:15 • Vue • 阅读 187

大家好，欢迎来到IT知识分享网。

简介及使用教程

Vue 拖拽组件(Draggable)是一个允许与View-Model同步进行拖放排序的Vue组件。这是基于Sortable.js并提供它的所有功能。

特点

完全支持Sortable.js特性：
- 支持触摸设备
- 支持拖动句柄和可选择的文本
- 智能自动滚动
- 支持在不同列表之间拖放，
- 没有jQuery依赖项
保持同步HTML和视图模型列表
兼容Vue.js2.0过渡-组
取消支持
在需要完全控制时会监听所有改变
重用现有UI库组件(如vuennify、Element或Vue Matter等.并使用tag和componentData props 使其可拖放

安装

npm i vuedraggable

使用

引入并注册

 import draggable from 'vuedraggable'
  ...
  export default {
        components: {
            draggable,
        },
  ...

经典用法

<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
   <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>

Vue 拖拽组件(Draggable)

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/30205.html

Vue 拖拽组件(Draggable)

安装

使用

相关推荐

发表回复