卡片的sak为不支持的类型_1小时搞定卡片拖拽、自动排列交换位置、拖拽数据存取...

1小时搞定卡片拖拽、自动排列交换位置、拖拽数据存取

来源：https://juejin.im/post/5da53e29e51d457822796ed8

首先演示一下最终效果：

流畅的拖动和交换位置效果，并实时更新数据

支持组件的样式和内容自定义

这是这次系列文章的第一篇，我自己封装了一个用vue实现的拖动卡片组件，并且发布到npm，详细地记录下来了整体制作过程。总共有三篇文章，介绍组件的制作思路和遇到的问题，以及在发布到npm上并下载使用的过程中，发生了什么问题并如何解决。

• 第一篇为组件封装后的使用文档及介绍
• 第二篇为组件的实现思路以及遇到的问题
• 第三篇为将组件打包并上传至npm，如何实现按需加载和下载后使用的问题

这是vue实现的拖动卡片组件，主要实现了：

• 拖动卡片与其他卡片的位置更换，并且其他卡片根据拖动的位置自动顺移
• 拖动的时候可使用鼠标滚动
• 卡片根据数据生成，所有参数和内容都是可以自定义的，方便应用于不同场景
• 不同操作的事件都可获取到，拖动后的位置数据会实时更新
• 可以全局安装和按需加载

如何使用？

下载carddragger

npm install carddragger复制代码

全局安装

在你vue项目的入口js文件中使用，vue-cli生成的项目一般为main.js文件

import {installCardDragger} from 'carddragger'Vue.use(installCardDragger)复制代码

按需加载

在组件中直接import

import { cardDragger } from 'carddragger'export default { components:{ cardDragger, }}复制代码

使用示例

1.基础使用：

复制代码

2.完整示例:

参照源码仓库中的examples

将整个项目clone下来，npm install+npm run serve即可看到完整示例

Props(参数)

属性说明类型默认值data必填，需要传入的卡片数据，具体格式请看下方解释Array-colNum卡片排列的列数Number2cardOutsideWidth卡片外部需要占据的宽度(包括无内容部分)Number590cardOutsideHeight卡片外部需要占据的高度(包括无内容部分)Number380cardInsideWidth卡片的宽度Number560cardInsideHeight卡片的高度Number320detectDistance卡片拖动的时候，会触发交换位置的最小距离Number50

data格式示例：

卡片的内容根据data数据生成或自定义