vue drag cards, automatic alignment exchange position, drag data access

This series of articles is the first chapter , I wrapped a drag card assembly with vue implemented , and to publish npm, a detailed record down the whole production process. A total of three articles, the production section describes the components and problems encountered, as well as process and downloaded for use on npm released into what happened and how to fix the problem.

The first is the use of the document and the presentation component package
The second component is the realization of ideas and the problems encountered
Title III for the packaging components and uploaded to npm, how to use the issue after loaded on demand and downloading

This is a drag card assembly vue implemented, the main achievement :

Drag cards with other cards replacement position, and the other card is automatically shifted according to the dragging of the cis position, real-time location data updates
Drag the scroll when using the mouse
The card data generation, all of the parameters and contents are customizable, easily applied to different scenes
Events of different operations to be acquired, the position data will be updated in real time drag
You can install and global demand loading

how to use?

Download carddragger

npm install carddragger

Global Installation

Use the entrance js file in your project vue, vue-cli-generated project file is usually main.js

import {installCardDragger} from 'carddragger'
Vue.use(installCardDragger)

Demand loading

Import directly in the assembly

import { cardDragger } from 'carddragger'

export default {
  components:{
    cardDragger,
  }
}

Examples of Use

1. Basics:

<template>
  <cardDragger :data="cardList">
  </cardDragger>
</template>
<script>
export default {
  data() {
    return {
      cardList: [{
        positionNum: i,
        name: "演示卡片"+i,
        id: "card"+i,
      }],
    }
  }
}
</script>

2. Complete example:
reference source repository of examples
will clone the entire project down, npm install + npm run serve to see the complete example

Props (parameters)

Attributes	Explanation	Types of	Defaults
data	Required, need to pass the card data, please see below explanation of the specific format	Array	-
Coin	The number of columns arranged in the card	Number	2
cardOutsideWidth	External card needs to occupy the width (portion including no content)	Number	590
cardOutsideHeight	External height occupied by the cards required (including no content portion)	Number	380
cardInsideWidth	The width of the card	Number	560
cardInsideHeight	Height card	Number	320
detectDistance	Drag the card when it will trigger the minimum distance exchange position	Number	50

Example data formats:

Card content data to generate or customize data according

<template>
    <div>
        <cardDragger 
        :data="cardList"
        :colNum="4"
        :cardOutsideWidth="300"
        :cardInsideWidth="260"
        :cardOutsideHeight="310"
        :cardInsideHeight="240"
        />
        <!-- 上面的属性都可自定义 -->
    </div>
</template>

<script>
export default {
    data(){
        return{
            cardList: [
                {
                    positionNum: 2,
                    name: "测试卡片2",
                    id: "card2",
                }
            ]
        }
    }
}
</script>

属性	说明	类型	默认值
id	必填，设置卡片的id作为唯一识别	String	-
positionNum	必填，设置卡片位置，从1开始依次递增	Number	-
name	选填，设置卡片的标题名称	String	'默认标题'
componentData	选填，设置卡片的内容为组件数据，如果此参数具有数据的话，则slot传入的数据失效	Array	-

Slot（插槽）

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

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

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

标题栏插槽

<cardDragger :data="cardList" >
  <!-- 在组件中间插入template并设置 v-slot:header="slotProps"
       header为标题栏的插槽名字，在里面的内容会渲染到你每一个卡片标题栏上
       slotProps为从子组件返回的数据，及data数组里面的每一个对象数据-->
  <template v-slot:header="slotProps">
    <!-- 自定义内容 -->
    <div class="topMenuBox" >
      <div class="menuTitle" v-if="slotProps.item.name">{{slotProps.item.name}}</div>
      <div class="menuTitle" v-else> 默认标题 </div>
    </div>
  </template>
</cardDragger>

内容插槽

<cardDragger :data="cardList">
  <!-- 与标题栏插槽一致，但需要注意v-slot:content-->
  <template v-slot:content="slotProps">
    <div class="insideData">
      {{slotProps.item.name}}
    </div>
  </template>
</cardDragger>

你也可以

<cardDragger :data="cardList">
  <!-- 与标题栏插槽一致，但需要注意v-slot:content-->
  <template v-slot:content="slotProps">
     <component :is="slotProps.item.OtherData"></component>
     <!--这里用到的是vue的动态组件功能动态渲染组件，可传入更多属性至子组件 -->
  </template>
</cardDragger>

//省略部分代码,加载你的组件
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，是卡片交换完成后的数据

作者：裂泉
链接：https://juejin.im/post/5da53e29e51d457822796ed8
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。