vue 如何实现拖动:vue-draggable

发布时间:2023年12月20日

vue-draggable

官方文档:传送门

特点:

  • 支持触摸设备(如vue项目的移动端开发Quasar)
  • 支持拖拽和选择文本
  • 支持不同列表之间的拖拽
  • 视图模型的同步刷新
  • 与vue2的过渡动画(transition-group)兼容
  • 有很多监听函数,当需要完全控制时,可以抛出所有变化
  • 可以和现有的UI组件相兼容

使用

<draggable v-model="specimenTableColumnsList" animation="300">
        <div v-for="(item, index) of specimenTableColumnsList" :key="index" v-show="!item.fixed" class="table-typeset-model">
          {{ item.title }}
        </div>
</draggable>

import draggable from 'vuedraggable'
export default {
  name: "SearchGroup",
  data() { 
  	return {
  		specimenTableColumnsList: [
  		{title: '标本条码', fixed: 'left', ...},
  		{title: '当前箱码', ...}, {title: '合箱标记', ...}, {...}]
  	}
  },
  components: { draggable }
}

属性及事件

draggable标签的属性
在这里插入图片描述
options配置项
在这里插入图片描述
事件
在这里插入图片描述

文章来源:https://blog.csdn.net/sinat_33255495/article/details/135115060
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。