html 卡片拖动自动排列,vue卡片拖拽、自动排列交换位置、拖拽数据存取(示例代码)...

这是这次系列文章的第一篇，我自己封装了一个用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‘exportdefault{

components:{

cardDragger,

}

}

使用示例

1.基础使用：

data() {return{

cardList: [{

positionNum: i,

name:"演示卡片"+i,

id:"card"+i,

}],

}

}

}

2.完整示例:

参照源码仓库中的examples

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

Props(参数)

属性说明类型默认值

data

必填，需要传入的卡片数据，具体格式请看下方解释

Array

-

colNum

卡片排列的列数

Number

2

cardOutsideWidth

卡片外部需要占据的宽度(包括无内容部分)

Number

590

cardOutsideHeight

卡片外部需要占据的高度(包括无内容部分)

Number

380

cardInsideWidth

卡片的宽度

Number

560

cardInsideHeight

卡片的高度

Number

320

detectDistance

卡片拖动的时候，会触发交换位置的最小距离

Number

50

data格式示例：

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

:data="cardList":colNum="4":cardOutsideWidth="300":cardInsideWidth="260":cardOutsideHeight="310":cardInsideHeight="240"

/>

data(){return{

cardList: [

{

positionNum:2,

name:"测试卡片2",

id:"card2",

}

]

}

}

}

属性说明类型默认值

id

必填，设置卡片的id作为唯一识别

String

-

positionNum

必填，设置卡片位置，从1开始依次递增

Number

-

name

选填，设置卡片的标题名称

String

‘默认标题‘

componentData

选填，设置卡片的内容为组件数据，如果此参数具有数据的话，则slot传入的数据失效

Array

-

Slot(插槽)

首先先介绍一下，卡片内容分为上下两部分：

上部分为卡片的标题栏，并且拖拽事件只有点击上部分才触发

下部分为卡片的内容

两个部分都是可以进行自定义内容及样式的。若不添加的自定义内容的话，标题栏和内容都是默认背景为白色，显示data中的name。若添加了自定义内容则背景需要自己设置。

标题栏插槽

{{slotProps.item.name}}

默认标题

内容插槽

{{slotProps.item.name}}

你也可以

//省略部分代码,加载你的组件

import exampleChild1 from "./childComponent/exampleChild1"cardList: [

{

positionNum:1,

name:"演示卡片1",

id:"card1",

OtherData:exampleChild1//OtherData这个是你自己定义的属性，注意不可与componentData属性名字重复

}

]

关于内容我做了另外一个判断，你可以将需要的组件放在data的componentData属性里面，内容会自动读取componentData的数据。当然你直接都使用slot就可以忽略这个属性。

import exampleChild1 from "./childComponent/exampleChild1"

//省略部分代码

cardList: [

{

positionNum:1,

name:"演示卡片1",

id:"card1",

componentData:exampleChild1//直接设置即可使用

/*componnetData传入的组件，可传入两个我定义好的Props

animationState：{

类型：Boolean,

功能：首次加载卡片的时候为true，之后为false

}

itemData：{

类型：Object,

功能：传入组件数据

}*/}

]//在子组件中使用props即可使用

props:{

animationState:{

type:Boolean,default:true},

itemData:{

type:Object

}

}

渲染优先级：data的componentData > slot > 默认内容

Events(事件)

startDrag

事件作用：

在点击卡片顶部标题栏的时候，触发此函数

事件参数：

startDrag(event,id)

第一个参数event，是点击事件的原生event

第二个参数id，是选中的卡片的id

swicthPosition

作用：

在拖动一个卡片到另外一个卡片的位置的时候，触发此事件

事件参数：

swicthPosition(oldPositon,newPositon,originItem)

第一个参数oldPositon，是卡片原来的位置号码

第二个参数newPositon，是卡片需要交换的位置号码

第三个参数originItem，是卡片交换完成后的数据

finishDrag

事件作用：

拖拽完成松开鼠标后，触发此事件

事件参数：

swicthPosition(oldPositon,newPositon,originItem)

第一个参数oldPositon，是卡片原来的位置号码

第二个参数newPositon，是卡片需要交换的位置号码

第三个参数originItem，是卡片交换完成后的数据