├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── examples
    ├── assets
    │   ├── logo.png
    │   ├── step1.gif
    │   ├── step2.gif
    │   └── step3.png
    ├── main.js
    ├── components
    │   ├── childComponent
    │   │   └── exampleChild1.vue
    │   ├── example1.vue
    │   ├── example3.vue
    │   └── example2.vue
    └── App.vue
├── .npmignore
├── lib
    └── demo.html
├── packages
    ├── card-dragger
    │   ├── index.js
    │   └── src
    │   │   └── card-dragger.vue
    └── index.js
├── .gitignore
├── vue.config.js
├── package.json
└── README.md


/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dwanda/dragComponent/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/examples/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dwanda/dragComponent/HEAD/examples/assets/logo.png


--------------------------------------------------------------------------------
/examples/assets/step1.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dwanda/dragComponent/HEAD/examples/assets/step1.gif


--------------------------------------------------------------------------------
/examples/assets/step2.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dwanda/dragComponent/HEAD/examples/assets/step2.gif


--------------------------------------------------------------------------------
/examples/assets/step3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dwanda/dragComponent/HEAD/examples/assets/step3.png


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | # 忽略目录
 2 | examples/
 3 | packages/
 4 | public/
 5 | 
 6 | # 忽略指定文件
 7 | vue.config.js
 8 | babel.config.js
 9 | *.map
10 | 


--------------------------------------------------------------------------------
/lib/demo.html:
--------------------------------------------------------------------------------
1 | <meta charset="utf-8">
2 | <title>carddragger demo</title>
3 | <script src="./carddragger.umd.js"></script>
4 | 
5 | 
6 | <script>
7 | console.log(carddragger)
8 | </script>
9 | 


--------------------------------------------------------------------------------
/examples/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | 
 4 | // import {installCardDragger} from '../packages/index'
 5 | // 注册组件库
 6 | // Vue.use(installCardDragger)
 7 | 
 8 | Vue.config.productionTip = false
 9 | 
10 | new Vue({
11 |   render: h => h(App),
12 | }).$mount('#app')
13 | 


--------------------------------------------------------------------------------
/packages/card-dragger/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // 导入组件，组件必须声明 name
 3 | import cardDragger from './src/card-dragger.vue'
 4 | 
 5 | // 为组件提供 install 安装方法，供按需引入
 6 | cardDragger.install = function (Vue) {
 7 |   Vue.component(cardDragger.name, cardDragger)
 8 | }
 9 | 
10 | // 默认导出组件
11 | export default cardDragger
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | /lib
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/packages/index.js:
--------------------------------------------------------------------------------
 1 | // 导入颜色选择器组件
 2 | import cardComponent from './card-dragger'
 3 | 
 4 | export const cardDragger = cardComponent
 5 | 
 6 | // 存储组件列表
 7 | const components = [
 8 |   cardDragger
 9 | ]
10 | 
11 | // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
12 | export const installCardDragger = function (Vue) {
13 |   // 判断是否安装
14 |   if (installCardDragger.installed) return
15 |   // 遍历注册全局组件
16 |   components.map(component => Vue.component(component.name, component))
17 | }


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>carddragger</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but carddragger doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/examples/components/childComponent/exampleChild1.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="contentBox">
 3 |       {{itemData.name}}+1
 4 |       <img src="../../assets/logo.png">
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | 
10 | export default {
11 |   name: 'exampleChild1',
12 |   props:{
13 |     itemData:{
14 |       type:Object
15 |     }
16 |   },
17 |   mounted() {
18 |     console.log(this.itemData)
19 |   },
20 | }
21 | 
22 | </script>
23 | <style scoped>
24 | .contentBox{
25 |   width: 100%;
26 |   height:100%;
27 |   background-color: white;
28 |   display: flex;
29 |   justify-content: center;
30 |   align-items: center;
31 | }
32 | </style>
33 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     // 修改 src 为 examples
 3 |     pages: {
 4 |         index: {
 5 |             entry: 'examples/main.js',
 6 |             template: 'public/index.html',
 7 |             filename: 'index.html'
 8 |         }
 9 |     },
10 |     css: {
11 |         extract:false
12 |     },
13 |     // 扩展 webpack 配置，使 packages 加入编译
14 |     chainWebpack: config => {
15 |         config.module
16 |             .rule('js')
17 |             .include
18 |             .add('/packages')
19 |             .add('/examples')
20 |             .end()
21 |             .use('babel')
22 |             .loader('babel-loader')
23 |             .tap(options => {
24 |                 // 修改它的选项...
25 |                 return options
26 |             })
27 |     }
28 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "carddragger",
 3 |   "version": "0.3.6",
 4 |   "private": false,
 5 |   "description": "基于vue的卡片拖拽排列组件",
 6 |   "main": "lib/carddragger.umd.min.js",
 7 |   "keywords": [
 8 |     "carddragger",
 9 |     "dragger",
10 |     "mover"
11 |   ],
12 |   "author": "https://juejin.im/user/5c25eae2e51d4573c84905c6",
13 |   "license": "MIT",
14 |   "scripts": {
15 |     "serve": "vue-cli-service serve",
16 |     "build": "vue-cli-service build",
17 |     "lib": "vue-cli-service build --target lib --name carddragger --dest lib packages/index.js"
18 |   },
19 |   "dependencies": {
20 |     "core-js": "^2.6.5",
21 |     "vue": "^2.6.10"
22 |   },
23 |   "devDependencies": {
24 |     "@vue/cli-plugin-babel": "^3.11.0",
25 |     "@vue/cli-service": "^3.11.0",
26 |     "vue-template-compiler": "^2.6.10"
27 |   },
28 |   "postcss": {
29 |     "plugins": {
30 |       "autoprefixer": {}
31 |     }
32 |   },
33 |   "browserslist": [
34 |     "> 1%",
35 |     "last 2 versions"
36 |   ]
37 | }
38 | 


--------------------------------------------------------------------------------
/examples/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <button @click="changeExample">切换案例</button>
 4 |     <example1 v-if="exampleSelect===1" />
 5 |     <example2 v-else-if="exampleSelect===2" />
 6 |     <example3 v-else-if="exampleSelect===3"/>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import example1 from './components/example1.vue'
12 | import example2 from './components/example2.vue'
13 | import example3 from './components/example3.vue'
14 | 
15 | 
16 | export default {
17 |   name: 'app',
18 |   data() {
19 |     return {
20 |       exampleSelect:1
21 |     }
22 |   },
23 |   components: {
24 |     example1,example2,example3
25 |   },
26 |   methods: {
27 |     changeExample(){
28 |       if(this.exampleSelect===3){
29 |         this.exampleSelect=1
30 |       }
31 |       else{
32 |         this.exampleSelect++
33 |       }
34 |     }
35 |   },
36 | }
37 | </script>
38 | 
39 | <style>
40 | body {
41 |   padding: 60px;
42 |   background-color: rgb(240, 240, 240);
43 | }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/examples/components/example1.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="main">
  3 |     <cardDragger :data="componentData" @finishDrag="finishDrag">
  4 |       <template v-slot:header="slotProps">
  5 |         <div class="topMenuBox" >
  6 |           <div class="menuTitle" v-if="slotProps.item.name">{{slotProps.item.name}}</div>
  7 |           <div class="menuTitle" v-else> 默认标题 </div>
  8 |           <div class="dotBox">
  9 |              <div class="circleDot"></div>
 10 |              <div class="circleDot"></div>
 11 |              <div class="circleDot"></div>
 12 |           </div>
 13 |         </div>
 14 |       </template>
 15 |     </cardDragger>
 16 |   </div>
 17 | </template>
 18 | 
 19 | <script>
 20 | import { cardDragger } from '../../packages/index'
 21 | import exampleChild1 from "./childComponent/exampleChild1"
 22 | 
 23 | export default {
 24 |   name: 'example1',
 25 |   components:{
 26 |     cardDragger,
 27 |     exampleChild1
 28 |   },
 29 |   data() {
 30 |     return {
 31 |       componentData: [
 32 |         {
 33 |           positionNum: 1,
 34 |           name: "演示卡片1",
 35 |           id: "card1",
 36 |           componentData:exampleChild1,
 37 |         },
 38 |         {
 39 |           positionNum: 2,
 40 |           name: "演示卡片2",
 41 |           id: "card2",
 42 |           componentData:exampleChild1,
 43 |         },
 44 |         {
 45 |           positionNum: 3,
 46 |           name: "演示卡片3",
 47 |           id: "card3",
 48 |           componentData:exampleChild1,
 49 |         },
 50 |         {
 51 |           positionNum: 4,
 52 |           name: "演示卡片4",
 53 |           id: "card4",
 54 |           componentData:exampleChild1
 55 |         },
 56 |       ],
 57 |     }
 58 |   },
 59 |   methods:{
 60 |     finishDrag(old,newVal,item){
 61 |       // console.log(old,newVal,item)
 62 |     }
 63 |   },
 64 |   mounted(){
 65 | 
 66 |   }
 67 | }
 68 | </script>
 69 | 
 70 | <!-- Add "scoped" attribute to limit CSS to this component only -->
 71 | <style scoped>
 72 | .main{
 73 |   width: 1200px;
 74 |   margin: auto;
 75 | }
 76 | .insideData{
 77 |   width: 100%;
 78 |   height: 100%;
 79 |   font-size: 16px;
 80 |   display: flex;
 81 |   justify-content: center;
 82 |   align-items: center;
 83 |   color: rgb(34, 54, 110);
 84 |   background-color: rgb(255, 255, 255);
 85 | }
 86 | .topMenuBox{
 87 |   background-color: rgb(255, 255, 255);
 88 |   height: 50px;
 89 |   display: flex;
 90 |   justify-content: space-between;
 91 |   align-items: center;
 92 |   font-size: 14px;
 93 |   color: #818181;
 94 |   padding: 0px 15px;
 95 | }
 96 | .dotBox{
 97 |   display: flex;
 98 | }
 99 | .circleDot{
100 |   width: 3px;
101 |   height: 3px;
102 |   margin: 0 1.5px;
103 |   background-color: #c4c4c4;
104 |   border-radius: 50%;
105 | }
106 | </style>
107 | 


--------------------------------------------------------------------------------
/examples/components/example3.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="main">
  3 |     <cardDragger 
  4 |       :data="componentData"
  5 |       :colNum="3"
  6 |       :cardOutsideWidth="360"
  7 |       :cardInsideWidth="320"
  8 |       :cardOutsideHeight="250"
  9 |       :cardInsideHeight="210"
 10 |       @startDrag="startDrag"
 11 |       @swicthPosition="swicthPosition"
 12 |       @finishDrag="finishDrag"
 13 |     >
 14 |       <template v-slot:header="slotProps">
 15 |         <div class="topMenuBox">
 16 |           <div class="menuTitle" v-if="slotProps.item.name">{{slotProps.item.name}}</div>
 17 |           <div class="menuTitle" v-else> 默认标题 </div>
 18 |         </div>
 19 |       </template>
 20 |     </cardDragger>
 21 |   </div>
 22 | </template>
 23 | 
 24 | <script>
 25 | import { cardDragger } from '../../packages/index'
 26 | import exampleChild1 from "./childComponent/exampleChild1"
 27 | 
 28 | 
 29 | export default {
 30 |   name: 'example2',
 31 |   components:{
 32 |     cardDragger,
 33 |   },
 34 |   data() {
 35 |     return {
 36 |       componentData: [
 37 |         {
 38 |           positionNum: 1,
 39 |           name: "演示卡片1",
 40 |           id: "card1",
 41 |           componentData:exampleChild1,
 42 |           haha:'1'    //自定义属性
 43 |         }
 44 |       ],
 45 |     }
 46 |   },
 47 |   methods: {
 48 |     startDrag(event,id){
 49 |       console.log(event,id)
 50 |     },
 51 |     swicthPosition(OldPositon,NewPositon,originItem){
 52 |       console.log(OldPositon,NewPositon,originItem)
 53 |     },
 54 |     finishDrag(OldPositon,NewPositon,originItem){
 55 |       console.log(OldPositon,NewPositon,originItem)
 56 |       console.log('完成拖拽')
 57 |     },
 58 |     addData(){
 59 |       let num = this.componentData.length+1
 60 |       let data = {
 61 |         positionNum: num,
 62 |         name: "演示卡片"+num,
 63 |         id: "card"+num,
 64 |       }
 65 |       this.componentData.push(data)
 66 |     }
 67 |   },
 68 |   mounted(){
 69 | 
 70 |   }
 71 | }
 72 | </script>
 73 | 
 74 | <!-- Add "scoped" attribute to limit CSS to this component only -->
 75 | <style scoped>
 76 | .main{
 77 |   width: 1080px;
 78 |   margin: auto;
 79 | }
 80 | .insideData{
 81 |   width: 100%;
 82 |   height: 100%;
 83 |   font-size: 15px;
 84 |   display: flex;
 85 |   justify-content: center;
 86 |   align-items: center;
 87 |   color: rgb(34, 54, 110);
 88 |   background-color: rgb(255, 255, 255);
 89 | }
 90 | .topMenuBox{
 91 |   background-color: rgb(114, 157, 177);
 92 |   height: 50px;
 93 |   display: flex;
 94 |   justify-content: space-between;
 95 |   align-items: center;
 96 |   font-size: 14px;
 97 |   color: #ffffff;
 98 |   padding: 0px 15px;
 99 | }
100 | .dotBox{
101 |   display: flex;
102 | }
103 | .circleDot{
104 |   width: 3px;
105 |   height: 3px;
106 |   margin: 0 1.5px;
107 |   background-color: #c4c4c4;
108 |   border-radius: 50%;
109 | }
110 | </style>
111 | 


--------------------------------------------------------------------------------
/examples/components/example2.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="main">
  3 |     <button @click="addData">测试新增</button>
  4 |     <cardDragger 
  5 |       :data="componentData"
  6 |       :colNum="3"
  7 |       :cardOutsideWidth="360"
  8 |       :cardInsideWidth="320"
  9 |       :cardOutsideHeight="250"
 10 |       :cardInsideHeight="210"
 11 |       @startDrag="startDrag"
 12 |       @swicthPosition="swicthPosition"
 13 |       @finishDrag="finishDrag"
 14 |     >
 15 |       <template v-slot:header="slotProps">
 16 |         <div class="topMenuBox">
 17 |           <div class="menuTitle" v-if="slotProps.item.name">{{slotProps.item.name}}</div>
 18 |           <div class="menuTitle" v-else> 默认标题 </div>
 19 |         </div>
 20 |       </template>
 21 |     </cardDragger>
 22 |   </div>
 23 | </template>
 24 | 
 25 | <script>
 26 | import { cardDragger } from '../../packages/index'
 27 | import exampleChild1 from "./childComponent/exampleChild1"
 28 | 
 29 | 
 30 | export default {
 31 |   name: 'example2',
 32 |   components:{
 33 |     cardDragger,
 34 |   },
 35 |   data() {
 36 |     return {
 37 |       componentData: [],
 38 |     }
 39 |   },
 40 |   methods: {
 41 |     startDrag(event,id){
 42 |       console.log(event,id)
 43 |     },
 44 |     swicthPosition(OldPositon,NewPositon,originItem){
 45 |       console.log(OldPositon,NewPositon,originItem)
 46 |     },
 47 |     finishDrag(OldPositon,NewPositon,originItem){
 48 |       console.log(OldPositon,NewPositon,originItem)
 49 |       console.log('完成拖拽')
 50 |     },
 51 |     addData(){
 52 |       let num = this.componentData.length+1
 53 |       let data = {
 54 |         positionNum: num,
 55 |         name: "演示卡片"+num,
 56 |         id: "card"+num,
 57 |       }
 58 |       this.componentData.push(data)
 59 |     }
 60 |   },
 61 |   mounted(){
 62 |     for(let i = 1; i<7; i++){
 63 |       let data = {
 64 |         positionNum: i,
 65 |         name: "演示卡片"+i,
 66 |         id: "card"+i,
 67 |         componentData:exampleChild1
 68 |       }
 69 |       this.componentData.push(data)
 70 |     }
 71 |   }
 72 | }
 73 | </script>
 74 | 
 75 | <!-- Add "scoped" attribute to limit CSS to this component only -->
 76 | <style scoped>
 77 | .main{
 78 |   width: 1080px;
 79 |   margin: auto;
 80 | }
 81 | .insideData{
 82 |   width: 100%;
 83 |   height: 100%;
 84 |   font-size: 15px;
 85 |   display: flex;
 86 |   justify-content: center;
 87 |   align-items: center;
 88 |   color: rgb(34, 54, 110);
 89 |   background-color: rgb(255, 255, 255);
 90 | }
 91 | .topMenuBox{
 92 |   background-color: rgb(114, 157, 177);
 93 |   height: 50px;
 94 |   display: flex;
 95 |   justify-content: space-between;
 96 |   align-items: center;
 97 |   font-size: 14px;
 98 |   color: #ffffff;
 99 |   padding: 0px 15px;
100 | }
101 | .dotBox{
102 |   display: flex;
103 | }
104 | .circleDot{
105 |   width: 3px;
106 |   height: 3px;
107 |   margin: 0 1.5px;
108 |   background-color: #c4c4c4;
109 |   border-radius: 50%;
110 | }
111 | </style>
112 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ## 一个**用vue实现的拖拽排列卡片组件**
  2 | 
  3 | **具体效果请参考：[文章链接](https://juejin.im/post/5da53e29e51d457822796ed8)**
  4 | 
  5 | 
  6 | **这是vue实现的拖动卡片组件，主要实现了**：
  7 | - 拖动卡片与其他卡片的位置更换，并且其他卡片根据拖动的位置自动顺移，位置数据实时更新
  8 | - 拖动的时候可使用鼠标滚动
  9 | - 卡片根据数据生成，所有参数和内容都是可以自定义的，方便应用于不同场景
 10 | - 不同操作的事件都可获取到，拖动后的位置数据会实时更新
 11 | - 可以全局安装和按需加载
 12 | 
 13 | #### 更多详情请见:
 14 | - [x] [第一篇为组件封装后的使用文档及介绍](https://juejin.im/post/5da53e29e51d457822796ed8)  
 15 | - [x] [第二篇为组件的实现思路以及细节](https://juejin.im/post/5dae5daae51d4524c24821de) 
 16 | - [ ] 第三篇为将组件打包并上传至npm，如何实现按需加载和下载后使用的问题
 17 | 
 18 | ## 如何使用？
 19 | #### 下载carddragger
 20 | 
 21 | ```
 22 | npm install carddragger
 23 | ```
 24 | 
 25 | ```
 26 | 当前稳定版本：0.3.6，更新于10月24日早上11点
 27 | ```
 28 | #### 全局安装
 29 | 在你vue项目的入口js文件中使用，vue-cli生成的项目一般为main.js文件
 30 | 
 31 | ```
 32 | import {installCardDragger} from 'carddragger'
 33 | Vue.use(installCardDragger)
 34 | ```
 35 | 
 36 | #### 按需加载
 37 | 在组件中直接import
 38 | 
 39 | ```
 40 | import { cardDragger } from 'carddragger'
 41 | 
 42 | export default {
 43 |   components:{
 44 |     cardDragger,
 45 |   }
 46 | }
 47 | ```
 48 | #### 使用示例
 49 | **1.基础使用：**
 50 | ```
 51 | <template>
 52 |   <cardDragger :data="cardList">
 53 |   </cardDragger>
 54 | </template>
 55 | <script>
 56 | export default {
 57 |   data() {
 58 |     return {
 59 |       cardList: [{
 60 |         positionNum: i,
 61 |         name: "演示卡片"+i,
 62 |         id: "card"+i,
 63 |       }],
 64 |     }
 65 |   }
 66 | }
 67 | </script>
 68 | ```
 69 | 
 70 | **2.完整示例:**  
 71 | 参照[**源码仓库**](https://github.com/dwanda/dragComponent)中的examples  
 72 | 将整个项目clone下来，npm install+npm run serve即可看到完整示例
 73 | 
 74 | ## Props（参数）
 75 | 属性 | 说明| 类型| 默认值
 76 | ---|---|---|---
 77 | data | 必填，需要传入的卡片数据，具体格式请看下方解释| Array| -
 78 | colNum | 卡片排列的列数| Number| 2
 79 | cardOutsideWidth| 卡片外部需要占据的宽度（包括无内容部分）| Number| 590
 80 | cardOutsideHeight| 卡片外部需要占据的高度（包括无内容部分）| Number| 380
 81 | cardInsideWidth| 卡片的宽度| Number| 560
 82 | cardInsideHeight| 卡片的高度| Number| 320
 83 | 
 84 | ![](https://user-gold-cdn.xitu.io/2019/10/21/16dec11bdf2c725c?w=1479&h=702&f=png&s=31102)
 85 | #### data格式示例：
 86 | 卡片的内容根据data数据生成或自定义
 87 | 
 88 | ```
 89 | <template>
 90 |     <div>
 91 |         <cardDragger 
 92 |         :data="cardList"
 93 |         :colNum="4"
 94 |         :cardOutsideWidth="300"
 95 |         :cardInsideWidth="260"
 96 |         :cardOutsideHeight="310"
 97 |         :cardInsideHeight="240"
 98 |         />
 99 |         <!-- 上面的属性都可自定义 -->
100 |     </div>
101 | </template>
102 | 
103 | <script>
104 | export default {
105 |     data(){
106 |         return{
107 |             cardList: [
108 |                 {
109 |                     positionNum: 2,
110 |                     name: "测试卡片2",
111 |                     id: "card2",
112 |                 }
113 |             ]
114 |         }
115 |     }
116 | }
117 | </script>
118 | ```
119 | 
120 | 属性 | 说明| 类型| 默认值
121 | ---|---|---|---
122 | id | 必填，设置卡片的id作为唯一识别| String| -
123 | positionNum | 必填，设置卡片位置，从1开始依次递增| Number| -
124 | name | 选填，设置卡片的标题名称| String| '默认标题'
125 | componentData | 选填，设置卡片的内容为组件数据，如果此参数具有数据的话，则slot传入的数据失效| 组件| -
126 | 
127 | ## Slot（插槽）
128 | 首先先介绍一下，卡片内容分为上下两部分：
129 | - 上部分为卡片的**标题栏**，并且拖拽事件只有点击上部分才触发
130 | - 下部分为卡片的**内容**  
131 | 
132 | 两个部分都是可以进行自定义内容及样式的。若不添加的自定义内容的话，标题栏和内容都是默认背景为白色，显示data中的name。**若添加了自定义内容则背景需要自己设置。**
133 | 
134 | #### 标题栏插槽
135 | 
136 | ```
137 | <cardDragger :data="cardList" >
138 |   <!-- 在组件中间插入template并设置 v-slot:header="slotProps"
139 |        header为标题栏的插槽名字，在里面的内容会渲染到你每一个卡片标题栏上
140 |        slotProps为从子组件返回的数据，及data数组里面的每一个对象数据-->
141 |   <template v-slot:header="slotProps">
142 |     <!-- 自定义内容 -->
143 |     <div class="topMenuBox" >
144 |       <div class="menuTitle" v-if="slotProps.item.name">{{slotProps.item.name}}</div>
145 |       <div class="menuTitle" v-else> 默认标题 </div>
146 |     </div>
147 |   </template>
148 | </cardDragger>
149 | ```
150 | 
151 | #### 内容插槽
152 | ```
153 | <cardDragger :data="cardList">
154 |   <!-- 与标题栏插槽一致，但需要注意v-slot:content-->
155 |   <template v-slot:content="slotProps">
156 |     <div class="insideData">
157 |       {{slotProps.item.name}}
158 |     </div>
159 |   </template>
160 | </cardDragger>
161 | ```
162 | 你也可以
163 | 
164 | ```
165 | <cardDragger :data="cardList">
166 |   <!-- 与标题栏插槽一致，但需要注意v-slot:content-->
167 |   <template v-slot:content="slotProps">
168 |      <component :is="slotProps.item.OtherData"></component>
169 |      <!--这里用到的是vue的动态组件功能动态渲染组件，可传入更多属性至子组件 -->
170 |   </template>
171 | </cardDragger>
172 | 
173 | //省略部分代码,加载你的组件
174 | import exampleChild1 from "./childComponent/exampleChild1"
175 | 
176 | cardList: [
177 |     {
178 |       positionNum: 1,
179 |       name: "演示卡片1",
180 |       id: "card1",
181 |       OtherData:exampleChild1  
182 |       //OtherData这个是你自己定义的属性，注意不可与componentData属性名字重复 
183 |     }
184 | ]
185 | 
186 | ```
187 | 
188 | 关于内容我做了另外一个判断，你可以将需要的组件放在data的componentData属性里面，内容会自动读取componentData的数据。当然你直接都使用slot就可以忽略这个属性。
189 | 
190 | ```
191 | import exampleChild1 from "./childComponent/exampleChild1"
192 | //省略部分代码
193 | cardList: [
194 |     {
195 |       positionNum: 1,
196 |       name: "演示卡片1",
197 |       id: "card1",
198 |       componentData:exampleChild1   //直接设置即可使用 
199 |     }
200 | ]
201 | //使用componnetData属性传入的组件，可使用Props获取到单个卡片数据
202 | //在子组件中使用props即可使用
203 | props:{
204 |     itemData:{
205 |       type:Object
206 |     }
207 | }
208 | ```
209 | 
210 | **渲染优先级**：data的componentData > slot > 默认内容
211 | 
212 | ## Events（事件）
213 | 
214 | ### startDrag  
215 | > **作用**：  
216 | > 在点击卡片顶部标题栏的时候，触发此函数  
217 | 
218 | > **参数**：  
219 | > startDrag(event,id)  
220 | >
221 | > 第一个参数event，是点击事件的原生event  
222 | > 第二个参数id，是选中的卡片的id  
223 | 
224 | 
225 | ### swicthPosition  
226 | > **作用**：  
227 | > 在拖动一个卡片到另外一个卡片的位置的时候，触发此事件
228 | 
229 | > **参数**：  
230 | > swicthPosition(oldPositon,newPositon,originItem)  
231 | >
232 | > 第一个参数oldPositon，是卡片原来的位置号码  
233 | > 第二个参数newPositon，是卡片需要交换的位置号码  
234 | > 第三个参数originItem，是卡片交换完成后的数据
235 | 
236 | ### finishDrag  
237 | > **作用**：  
238 | > 拖拽完成松开鼠标后，触发此事件
239 | 
240 | > **参数**：  
241 | > swicthPosition(oldPositon,newPositon,originItem)  
242 | >
243 | > 第一个参数oldPositon，是卡片原来的位置号码  
244 | > 第二个参数newPositon，是卡片需要交换的位置号码  
245 | > 第三个参数originItem，是卡片交换完成后的数据
246 | 
247 | 
248 | ## 考虑修复的问题
249 | 1.data的positionNum出现空缺则会报错，必须从1依次递增。但好像这种场景也不常用，考虑修复ing。
250 | 
251 | 
252 | ## 未来计划
253 | - [ ] 如果有需要的话我再封装个react版本
254 | - [ ] 修改其他需要的参数和进行扩展  
255 | 
256 | **觉得这个系列有点意思的话，点个星星支持一下呗！**
257 | 


--------------------------------------------------------------------------------
/packages/card-dragger/src/card-dragger.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     :style="{
  4 |         position:'relative',
  5 |         height:computeTop(data.length)+cardOutsideHeight+'px',
  6 |         width:cardOutsideWidth*colNum+'px'}"
  7 |   >
  8 |     <div
  9 |       class="d_cardBorderBox"
 10 |       v-for="item of data"
 11 |       :key="item.id"
 12 |       :id="item.id"
 13 |       :style="{ 
 14 |           width:cardOutsideWidth+'px', 
 15 |           height:cardOutsideHeight+'px'
 16 |       }"
 17 |     >
 18 |       <div 
 19 |         class="d_cardInsideBox" 
 20 |         :style="{ 
 21 |             width:cardInsideWidth+'px',
 22 |             height:cardInsideHeight+'px'}"
 23 |       >
 24 |         <div @mousedown="touchStart($event,item.id)" class="d_topWrapBox">
 25 |           <slot name="header" v-bind:item="item">
 26 |             <div class="d_topMenuBox" >
 27 |               <div class="d_menuTitle" v-if="item.name">{{item.name}}</div>
 28 |               <div class="d_menuTitle" v-else> 默认标题 </div>
 29 |             </div>
 30 |           </slot>
 31 |         </div>
 32 |         <component :is="item.componentData" :itemData="item" v-if="item.componentData"></component>
 33 |         <slot name="content" v-bind:item="item" v-else>
 34 |           <div class="d_emptyContent">
 35 |             卡片暂无内容
 36 |           </div>
 37 |         </slot>
 38 |       </div>
 39 |     </div>
 40 |   </div>
 41 | </template>
 42 | 
 43 | <script>
 44 | 
 45 | export default {
 46 |   name: "cardDragger",
 47 |   props:{
 48 |     data:{
 49 |       type:Array,
 50 |       default: function () {
 51 |         return []
 52 |       }
 53 |     },
 54 |     colNum:{
 55 |       type:Number,
 56 |       default:2
 57 |     },
 58 |     cardOutsideWidth:{
 59 |       type:Number,
 60 |       default:590      
 61 |     },
 62 |     cardOutsideHeight:{
 63 |       type:Number,
 64 |       default:380      
 65 |     },
 66 |     cardInsideWidth:{
 67 |       type:Number,
 68 |       default:560      
 69 |     },
 70 |     cardInsideHeight:{
 71 |       type:Number,
 72 |       default:320      
 73 |     }
 74 |   },
 75 |   data: () => ({
 76 |     mousedownTimer: null
 77 |   }),
 78 |   methods: {
 79 |     touchStart(event, selectId) {
 80 |       if (this.mousedownTimer) {
 81 |         return false;
 82 |       }
 83 |       //若触发了点击事件，则返回一个暴露出一个方法
 84 |       this.$emit('startDrag',event,selectId)
 85 | 
 86 |       const that = this;
 87 |       let DectetTimer = null;
 88 | 
 89 |       let originTop = document.body.scrollTop === 0 ? document.documentElement.scrollTop : document.body.scrollTop;
 90 |       let scrolTop = originTop;
 91 |       //记录鼠标移动的距离
 92 |       let moveTop = 0;
 93 |       let moveLeft = 0;
 94 |       //起始组件位置
 95 |       let OriginObjPosition = {
 96 |         left: 0,
 97 |         top: 0,
 98 |         originNum: -1
 99 |       };
100 |       // 起始鼠标信息
101 |       let OriginMousePosition = {
102 |         x: 0,
103 |         y: 0
104 |       };
105 |       // 记录交换位置的号码
106 |       let OldPositon = null;
107 |       let NewPositon = null;
108 |       // 选中的卡片的dom和数据
109 |       let selectDom = document.getElementById(selectId);
110 |       let selectMenuData = this.data.find(item => {
111 |         return item.id === selectId;
112 |       });
113 | 
114 |       OriginMousePosition.x = event.screenX;
115 |       OriginMousePosition.y = event.screenY;
116 | 
117 |       selectDom.classList.add('d_moveBox')
118 | 
119 |       moveLeft = OriginObjPosition.left = parseInt(
120 |         selectDom.style.left.slice(0, selectDom.style.left.length - 2)
121 |       );
122 |       moveTop = OriginObjPosition.top = parseInt(
123 |         selectDom.style.top.slice(0, selectDom.style.top.length - 2)
124 |       );
125 |       
126 |       document.addEventListener("mousemove", mouseMoveListener);
127 |       document.addEventListener("mouseup", mouseUpListener);
128 |       document.addEventListener("scroll", mouseScroll);
129 |       
130 |       function mouseMoveListener(event) {
131 |         moveTop = OriginObjPosition.top + ( event.screenY - OriginMousePosition.y );
132 |         moveLeft = OriginObjPosition.left + ( event.screenX - OriginMousePosition.x );
133 | 
134 |         document.querySelector(".d_moveBox").style.left = moveLeft + "px";
135 |         document.querySelector(".d_moveBox").style.top = moveTop + (scrolTop - originTop) + "px";  //这里要加上滚动的高度
136 | 
137 |         if (!DectetTimer) {
138 |           DectetTimer = setTimeout(()=>{
139 |             cardDetect(moveTop + (scrolTop - originTop),moveLeft) 
140 |             DectetTimer = null;
141 |           }, 200);
142 |         }     
143 |       }
144 | 
145 |       function mouseScroll(event) {
146 |         scrolTop =
147 |           document.body.scrollTop === 0
148 |             ? document.documentElement.scrollTop
149 |             : document.body.scrollTop;
150 |         document.querySelector(".d_moveBox").style.top = moveTop + scrolTop - originTop + "px";
151 |       }
152 | 
153 |       function cardDetect(moveItemTop, moveItemLeft){
154 |         //计算当前移动卡片，可以覆盖的号码位置
155 |         let newWidthNum = Math.round((moveItemLeft/ that.cardOutsideWidth))+1
156 |         let newHeightNum = Math.round((moveItemTop/ that.cardOutsideHeight))
157 | 
158 |         if(newHeightNum>(Math.ceil(that.data.length / that.colNum) - 1)||
159 |           newHeightNum<0||
160 |           newWidthNum<=0||
161 |           newWidthNum>that.colNum){
162 |           return false
163 |         }
164 | 
165 |         const newPositionNum = (newWidthNum) + newHeightNum * that.colNum
166 |         if(newPositionNum!==selectMenuData.positionNum){
167 |           let newItem = that.data.find(item=>{
168 |             return item.positionNum === newPositionNum
169 |           })
170 |           if( newItem ){
171 |             swicthPosition(newItem, selectMenuData);
172 |           }
173 |         }      
174 |       }
175 | 
176 |       function swicthPosition(newItem, originItem) {
177 |         OldPositon = originItem.positionNum;
178 |         NewPositon = newItem.positionNum;
179 | 
180 |         that.$emit('swicthPosition',OldPositon,NewPositon,originItem)
181 | 
182 |         //位置号码从小移动到大
183 |         if (NewPositon > OldPositon) {
184 |           let changeArray = [];
185 |           //从小移动到大，那小的号码就会空出来，其余卡片应往前移动一位 
186 |           //找出两个号码中间对应的卡片数据
187 |           for (let i = OldPositon + 1; i <= NewPositon; i++) {
188 |             let pushData = that.data.find(item => {
189 |               return item.positionNum === i;
190 |             });
191 |             changeArray.push(pushData);
192 |           }
193 |           
194 |           for (let item of changeArray) {
195 |             //vue的$set使更改数据的同时实时刷新样式
196 |             that.$set(item, "positionNum", item.positionNum - 1);
197 |             document.querySelector('#'+item.id).style.top = that.computeTop(item.positionNum)+'px'
198 |             document.querySelector('#'+item.id).style.left = that.computeLeft(item.positionNum)+'px'
199 |           }
200 |           that.$set(originItem, "positionNum", NewPositon);
201 |         }
202 | 
203 |         //位置号码从大移动到小
204 |         if (NewPositon < OldPositon) {
205 |           let changeArray = [];
206 |           //从大移动到小，那大的号码就会空出来，其余卡片应往后移动一位 
207 |           //找出两个号码中间对应的卡片数据
208 |           for (let i = OldPositon - 1; i >= NewPositon; i--) {
209 |             let pushData = that.data.find(item => {
210 |               return item.positionNum === i;
211 |             });
212 |             changeArray.push(pushData);
213 |           }
214 | 
215 |           for (let item of changeArray) {
216 |             that.$set(item, "positionNum", item.positionNum + 1);
217 |             document.querySelector('#'+item.id).style.top = that.computeTop(item.positionNum)+'px'
218 |             document.querySelector('#'+item.id).style.left = that.computeLeft(item.positionNum)+'px'
219 |           }
220 |           that.$set(originItem, "positionNum", NewPositon);
221 | 
222 |         }
223 |       }
224 | 
225 |       function mouseUpListener() {
226 |         //取消位于交换队列的检测事件、对位置进行最后一次检测
227 |         clearTimeout(DectetTimer)
228 |         DectetTimer = null
229 |         cardDetect(moveTop + (scrolTop - originTop),moveLeft)
230 | 
231 |         document.querySelector(".d_moveBox").classList.add('d_transition');
232 |         document.querySelector(".d_moveBox").style.top = that.computeTop(selectMenuData.positionNum) + "px";
233 |         document.querySelector(".d_moveBox").style.left = that.computeLeft(selectMenuData.positionNum) + "px";
234 |         that.$emit('finishDrag',OldPositon,NewPositon,selectMenuData)
235 | 
236 |         that.mousedownTimer = setTimeout(() => {
237 |           /*用0.3秒来过渡
238 |             mousedownTimer在一开始对点击事件进行了判断，若还在过渡则不能进行下一次点击
239 |           */
240 |           document.querySelector(".d_moveBox").classList.remove('d_transition')
241 |           document.querySelector(".d_moveBox").classList.remove('d_moveBox')
242 |           clearTimeout(that.mousedownTimer);
243 |           that.mousedownTimer = null;
244 |         }, 300);
245 |     
246 |         document.removeEventListener("mousemove", mouseMoveListener);
247 |         document.removeEventListener("mouseup", mouseUpListener);
248 |         document.removeEventListener("scroll", mouseScroll);
249 |       }
250 |     },
251 |     computeLeft(num) {
252 |       return (num-1) % this.colNum * this.cardOutsideWidth;
253 |     },
254 |     computeTop(num) {
255 |       return (Math.ceil(num / this.colNum) - 1) * this.cardOutsideHeight;
256 |     },
257 |     addCardStyle(){
258 |       this.$nextTick(()=>{
259 |         this.data.forEach(item=>{
260 |           document.querySelector('#'+item.id).style.top = this.computeTop(item.positionNum)+'px'
261 |           document.querySelector('#'+item.id).style.left = this.computeLeft(item.positionNum)+'px'
262 |         })
263 |       })
264 |     }
265 |   },
266 |   watch:{
267 |     data:{
268 |       handler:function(){
269 |         this.addCardStyle()     
270 |       },
271 |       immediate: true
272 |     }
273 |   }
274 | };
275 | </script>
276 | <style scoped>
277 | .d_cardBorderBox {  
278 |   user-select: none;
279 |   position: absolute;
280 |   transition: all 0.3s;
281 |   display: flex;
282 |   justify-content: center;
283 |   align-items: center;
284 | }
285 | .d_cardInsideBox {
286 |   border-radius: 5px;
287 |   box-shadow: 0 0 5px #cacaca;
288 |   display: flex;
289 |   flex-direction: column;
290 |   overflow: hidden;
291 | }
292 | .d_menuTitle {
293 |   pointer-events: none;
294 | }
295 | .d_topMenuBox {
296 |   height: 50px;
297 |   display: flex;
298 |   align-items: center;
299 |   font-size: 14px;
300 |   color: #838383;
301 |   background-color: white;
302 |   padding: 0px 15px;
303 | }
304 | .d_moveBox {
305 |   top:20px;
306 |   left: 20px;
307 |   z-index: 300;
308 |   transition: none;
309 | }
310 | .d_topWrapBox {
311 |   cursor: move;
312 |   border-bottom: 1px solid #e0e0e0;
313 | }
314 | .d_emptyContent{
315 |   width: 100%;
316 |   height: 100%;
317 |   font-size: 16px;
318 |   color: #979797;
319 |   display: flex;
320 |   justify-content: center;
321 |   align-items: center;
322 | }
323 | .d_transition{
324 |   transition: all 0.3s;
325 | }
326 | </style>
327 | 


--------------------------------------------------------------------------------