├── .browserslistrc
├── babel.config.js
├── public
    ├── favicon.ico
    ├── check_box.png
    ├── check-box-outline-blank.png
    └── index.html
├── postcss.config.js
├── src
    ├── views
    │   ├── About.vue
    │   └── Home.vue
    ├── main.js
    ├── App.vue
    ├── router.js
    └── components
    │   ├── HelloWorld.vue
    │   └── main.vue
├── .gitignore
├── README.md
├── .eslintrc.js
└── package.json


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 | 


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


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luleiyu/transfer/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/check_box.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luleiyu/transfer/HEAD/public/check_box.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/public/check-box-outline-blank.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luleiyu/transfer/HEAD/public/check-box-outline-blank.png


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>This is an about page</h1>
4 |   </div>
5 | </template>
6 | 


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


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import ElementUI from 'element-ui';
 5 | import 'element-ui/lib/theme-chalk/index.css';
 6 | Vue.config.productionTip = false
 7 | Vue.use(ElementUI);
 8 | new Vue({
 9 |   router,
10 |   render: h => h(App)
11 | }).$mount('#app')
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue-Transfer
 2 | 
 3 | Vue仿element-ui穿梭框效果,并添加拖拽功能
 4 | 
 5 | # 进入transfer 文件夹
 6 | 
 7 | ``` bash
 8 | cd Transfer
 9 | ```
10 | 
11 | # 安装依赖
12 | 
13 | ``` bash
14 | npm i 或者 cnpm i 或者 yarn
15 | ```
16 | 
17 | # 运行项目 run project
18 | 
19 | ``` bash
20 | npm run serve
21 | ```
22 | 
23 | # 打包项目 build project
24 | 
25 | ``` bash
26 | npm run build
27 | ```


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     'eslint:recommended'
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13 |   },
14 |   parserOptions: {
15 |     parser: 'babel-eslint'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">   
 3 |     <router-view/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style lang="less">
 8 | #app {
 9 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
10 |   -webkit-font-smoothing: antialiased;
11 |   -moz-osx-font-smoothing: grayscale;
12 |   text-align: center;
13 |   color: #2c3e50;
14 | }
15 | #nav {
16 |   padding: 30px;
17 |   a {
18 |     font-weight: bold;
19 |     color: #2c3e50;
20 |     &.router-link-exact-active {
21 |       color: #42b983;
22 |     }
23 |   }
24 | }
25 | </style>
26 | 


--------------------------------------------------------------------------------
/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>hello-world</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but hello-world 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 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Home from './views/Home.vue'
 4 | 
 5 | Vue.use(Router)
 6 | 
 7 | export default new Router({
 8 |   mode: 'history',
 9 |   base: process.env.BASE_URL,
10 |   routes: [
11 |     {
12 |       path: '/',
13 |       name: 'home',
14 |       component: Home
15 |     },
16 |     {
17 |       path: '/about',
18 |       name: 'about',
19 |       // route level code-splitting
20 |       // this generates a separate chunk (about.[hash].js) for this route
21 |       // which is lazy-loaded when the route is visited.
22 |       component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
23 |     }
24 |   ]
25 | })
26 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hello-world",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "element-ui": "^2.4.11",
12 |     "vue": "^2.5.21",
13 |     "vue-router": "^3.0.1"
14 |   },
15 |   "devDependencies": {
16 |     "@vue/cli-plugin-babel": "^3.3.0",
17 |     "@vue/cli-plugin-eslint": "^3.3.0",
18 |     "@vue/cli-service": "^3.3.0",
19 |     "babel-eslint": "^10.0.1",
20 |     "eslint": "^5.8.0",
21 |     "eslint-plugin-vue": "^5.0.0",
22 |     "less": "^3.0.4",
23 |     "less-loader": "^4.1.0",
24 |     "vue-template-compiler": "^2.5.21"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <HelloWorld :source-l="data1" :target-r="data2"/>
 4 |     <Main :source-left="data3" :target-right="data4" />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | // @ is an alias to /src
10 | import HelloWorld from '@/components/HelloWorld.vue'
11 | import Main from '@/components/main.vue'
12 | export default {
13 |   name: 'home',
14 |   components: {
15 |     HelloWorld,
16 |     Main
17 |   },
18 |   data () {
19 |   	return {
20 | 			data1: [
21 | 	      {id: 1,value: 'UNYB-line1290', isSelect: false},
22 | 	      {id: 2,value: 'UOLB-line0', isSelect: false},
23 | 	      {id: 3,value: 'HBYB-lidfne585', isSelect: false},
24 | 	      {id: 4,value: 'UNYB-lwe560', isSelect: false},
25 | 	      {id: 5,value: 'DFLKYB-ldne3290', isSelect: false}
26 | 		  ],
27 | 		  data2:[{id: 6,value: 'SRESB-line1290', isSelect: false}],
28 |       data3:[
29 |         {key: 1, label: 'nihaoadf'},
30 |         {key: 2, label: 'nihaasdfo'},
31 |         {key: 3, label: 'nzxcvihao'},
32 |         {key: 4, label: 'niasdfhao'},
33 |         {key: 5, label: 'nihao'},
34 |         {key: 6, label: 'niasdfao'},
35 |         {key: 7, label: 'nihao'},
36 |         {key: 8, label: 'nizxvchao'},
37 |         {key: 9, label: 'nizxcvhao'}
38 |       ],
39 |       data4:[
40 |         {key: 10, label: 'nzcxvihao'},
41 |         {key: 11, label: 'nzxcvhao'}
42 |       ]
43 |   	}
44 |   }
45 | }
46 | </script>
47 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div id="box">
  3 |   <div class="box">
  4 |     <div class="title">
  5 |       <span :class="{active: leftSelect === data1.length}" @click="selectAll(data1)">课件列表</span>
  6 |       <span>{{leftSelect ? leftSelect : 0}}/{{data1.length}}</span>
  7 |     </div>
  8 | 
  9 |     <div class="search_parent">
 10 |       <!-- <div class="search_div"> -->
 11 |         <input class="search_input" v-model="sourceData" :class="heightLight ? 'search_input_focus' : ''" type="text" @focus="heightLight=true" @blur="heightLight=false" placeholder="请输入课件级别/编号">
 12 |       <!-- </div> -->
 13 |     </div>
 14 | 
 15 |     <div @drop="dropPub($event, 2)" @dragover.prevent class="left">
 16 |       <div
 17 |         @drag="ondrag"
 18 |         @dragstart="dragstart($event, item)"
 19 |         @dragend="dragend"
 20 |         draggable="true"
 21 |         class="hover-color"
 22 |         :class="{active: item.isSelect }" 
 23 |         v-on:click="hanldleClick(data1, item.id)" 
 24 |         v-for="item in changeSourceData" 
 25 |         :key="item.id">{{item.value}}</div>
 26 |     </div>
 27 |   </div>
 28 |   
 29 |   <div class="middle">
 30 |     <div v-on:click="moveItem(data2,data1)" :class="{active: rightSelect > 0}">移除</div>
 31 |     <div v-on:click="moveItem(data1, data2)" :class="{active: leftSelect > 0}">移入</div>
 32 |   </div>
 33 | 
 34 |   <div class="box">
 35 |     <div class="title">
 36 |       <span :class="{active: rightSelect === data2.length}" @click="selectAll(data2)">已选课件</span>
 37 |       <span>{{rightSelect ? rightSelect : 0}}/{{data2.length}}</span>
 38 |     </div>
 39 | 
 40 |     <div class="search_parent">
 41 |       <!-- <div class="search_div"> -->
 42 |         <input class="search_input" v-model="targetData" :class="heightLight1 ? 'search_input_focus' : ''" @focus="heightLight1=true" @blur="heightLight1=false" type="text" placeholder="请输入课件级别/编号">
 43 |       <!-- </div> -->
 44 |     </div>
 45 |     
 46 |     <div @drop="dropPub($event, 1)" @dragover.prevent class="right">
 47 |       <div
 48 |       class="hover-color"
 49 |       @drag="ondrag" 
 50 |       @dragstart="dragstart($event, item)"
 51 |       @dragend="dragend"
 52 |       draggable="true" 
 53 |       :class="{active: item.isSelect }" 
 54 |       v-on:click="hanldleClick(data2, item.id)" 
 55 |       v-for="item in changeTargetData" 
 56 |       :key="item.id">{{item.value}}</div>
 57 |     </div>
 58 |   </div>
 59 | </div>
 60 | </template>
 61 | <script>
 62 | export default {
 63 | props: {
 64 |   sourceL: {
 65 |     type: Array
 66 |   },
 67 |   targetR: {
 68 |     type: Array,
 69 |     default: function () {
 70 |       return []
 71 |     }
 72 |   }
 73 | },
 74 | data () {
 75 |   return {
 76 |     heightLight: false,
 77 |     heightLight1: false,
 78 |     data1: [
 79 |       // {id: 1,value: 'UNYB-line1290', isSelect: false},
 80 |       // {id: 2,value: 'UOLB-line0', isSelect: false},
 81 |       // {id: 3,value: 'HBYB-lidfne585', isSelect: false},
 82 |       // {id: 4,value: 'UNYB-lwe560', isSelect: false},
 83 |       // {id: 5,value: 'DFLKYB-ldne3290', isSelect: false},
 84 |     ],
 85 |     data2:[
 86 |       // {id: 6,value: 'SRESB-line1290', isSelect: false}
 87 |     ],
 88 |     target: {
 89 |       y: '',
 90 |       id: ''
 91 |     },
 92 |     sourceData: '',
 93 |     targetData: '',
 94 |     changeSourceData: [],
 95 |     changeTargetData: []
 96 |   }
 97 | },
 98 | created () {
 99 |   this.data1 = this.sourceL
100 |   this.data2 = this.targetR
101 |   // conosle.log(this.targetR)
102 |   this.changeSourceData = this.data1
103 |   this.changeTargetData = this.data2
104 | },
105 | watch: {
106 |   data2 () {
107 |     this.changeTargetData = this.data2
108 |   },
109 |   sourceData (val) {
110 |     let emptyArr = []
111 |     if (val) {
112 |       // val = val.toLowerCase()
113 |       for (let i = 0; i < this.data1.length; i++) {
114 |         if (this.data1[i].value.indexOf(val) != -1) {
115 |           emptyArr.push(this.data1[i])
116 |         }
117 |       }
118 |       this.changeSourceData = emptyArr
119 |     } else {
120 |       this.changeSourceData = this.data1
121 |     }
122 |   },
123 |   targetData (val) {
124 |     let emptyArr = []
125 |     if (val) {
126 |       // val = val.toLowerCase()
127 |       for (let i = 0; i < this.data2.length; i++) {
128 |         if (this.data2[i].value.indexOf(val) != -1) {
129 |           emptyArr.push(this.data2[i])
130 |         }
131 |       }
132 |       this.changeTargetData = emptyArr
133 |     } else {
134 |       this.changeTargetData = this.data2
135 |     }
136 |   }
137 | },
138 | methods: {
139 |   ondrag(event) {
140 |     this.target.y = event.y
141 |   },
142 |   dropPub (event, type) {
143 |     if (type == 1) {
144 |       this.drop(event,this.data1, this.data2)
145 |     } else {
146 |       this.drop(event,this.data2, this.data1)
147 |     }
148 |   },
149 |   drop (event,handle, target) {            
150 |     let id = event.dataTransfer.getData('id')
151 |     handle.forEach((item,index)=>{
152 |       if (item.id == id) {
153 |         let temp = handle.splice(index,1)
154 |         temp[0].isSelect = false
155 |         target.push(temp[0])
156 |       }
157 |     })
158 |     this.resort(event, target)    
159 |   },
160 |   resort (event,target) {
161 |     let eles =event.currentTarget.children
162 |     console.log(eles, target)            
163 |     for (let i = 0; i < target.length; i++) {
164 |       if (target[i].id == this.target.id) {
165 |         target[i].y = this.target.y
166 |       } else {
167 |         target[i].y = eles[i].getBoundingClientRect().y
168 |       }
169 |     }
170 |     for (let i = 0; i < target.length-1; i ++) {
171 |       for (let j = 0; j < target.length-i-1; j++ ) {
172 |         if (target[j].y > target[j+1].y) {
173 |           let swap = target[j]
174 |           target[j] = target[j+1]
175 |           target[j+1] = swap
176 |         }
177 |       }
178 |     }
179 |     this.$forceUpdate()
180 |   },
181 |   dragstart (event,item) {
182 |     this.target.id = item.id
183 |     event.dataTransfer.setData('id', item.id)
184 |   },
185 |   dragend (event) {
186 |     event.dataTransfer.clearData()
187 |   },
188 |   hanldleClick (data,id) {
189 |     data.forEach(element => {
190 |       if (element.id == id) {
191 |         element.isSelect = !element.isSelect
192 |       }
193 |     });
194 |   },
195 |   moveItem (handle, target) {
196 |       let temp = handle.filter(item=> {
197 |           return item.isSelect == true
198 |       })
199 |       if (temp.length <=0) return false
200 |       temp.forEach(item=> {
201 |           let index = handle.indexOf(item)
202 |           handle.splice(index,1)
203 |           item.isSelect = false
204 |           target.push(item)
205 |       })
206 |   },
207 |   selectAll (data) {
208 |     let isSelectAll = data.every(item => {
209 |       return item.isSelect == true
210 |     })
211 |     data.forEach(item=> {
212 |       if (isSelectAll) {
213 |         item.isSelect = false
214 |       } else {
215 |         item.isSelect = true
216 |       }
217 |     })
218 |   },
219 |   sourceSearch (val) {
220 |     console.log(val.target.value)
221 |     
222 |   },
223 |   targetSearch (val) {
224 |     console.log(val.target.value)
225 |   }
226 | },
227 | computed: {
228 |   leftSelect () {
229 |     if (this.data1.length === 0) return false
230 |     let arr =  this.data1.filter(item=> {
231 |       return item.isSelect == true
232 |     })
233 |     return arr.length
234 |   },
235 |   rightSelect () {
236 |     if (this.data2.length == 0) return false
237 |     let arr =  this.data2.filter(item=> {
238 |       return item.isSelect == true
239 |     })
240 |     return arr.length
241 |   }
242 | }
243 | }
244 | </script>
245 | <style>
246 |   * {
247 |     margin: 0;
248 |     padding: 0;
249 |   }
250 |   #box {
251 |     display: flex;
252 |     justify-content: center;
253 |     align-items: center;
254 |   }
255 |   .box {
256 |     border: 1px solid rgb(235, 238, 245);
257 |   }
258 |   .box .title {
259 |     font-size: 14px;
260 |     box-sizing: border-box;
261 |     padding-right: 10px;
262 |     display: flex;
263 |     justify-content: space-between;
264 |     width: 200px;
265 |     height: 40px;
266 |     line-height: 40px;
267 |     background: #f5f7fa;
268 |   }
269 |   .box .title span:first-child {
270 |     display: inline-block;
271 |     background: #f5f7fa;
272 |     background-image: url(../../public/check-box-outline-blank.png);
273 |     background-repeat: no-repeat;
274 |     background-position: 10px center;
275 |     background-size: 20px 20px;
276 |     padding-left: 35px;
277 |     cursor: pointer;
278 |   }
279 |   .box .title span:first-child.active {
280 |     background-image: url(../../public/check_box.png);
281 |   }
282 |   .left, .right {
283 |     width: 200px;
284 |     height: 250px;
285 |     padding: 5px 0;
286 |     box-sizing: border-box;
287 |     overflow-y: scroll;
288 |     overflow-x:hidden;
289 |   }
290 |   .left >div , .right > div {
291 |     cursor: pointer;
292 |     text-align: left;
293 |     background-image: url(../../public/check-box-outline-blank.png);
294 |     background-repeat: no-repeat;
295 |     background-position: 10px center;
296 |     background-size: 20px 20px;
297 |     font-size: 14px;
298 |     padding-left: 35px;
299 |     padding-top: 5px;
300 |     padding-bottom: 5px;
301 |   }
302 |   .left > div.active , .right > div.active {
303 |     background-image: url(../../public/check_box.png);
304 |   }
305 |   .left > div.hover-color:hover, .right > div.hover-color:hover {
306 |     color: rgb(64, 158, 255);
307 |   }
308 |   .middle {
309 |     margin:0 40px;
310 |   }
311 |   .middle > div {
312 |     margin: 10px 0;
313 |     display: flex;
314 |     justify-content: center;
315 |     align-items: center;
316 |     cursor: pointer;
317 |     width: 40px;
318 |     height: 40px;
319 |     border-radius: 50%;
320 |     border: 1px solid #dcdfe6;
321 |     font-size: 12px;
322 |     background-color: #f5f7fa;
323 |     color: #c0c4cc;
324 |   }
325 |   .middle > div.active {
326 |     background-color: #409eff;
327 |     border-color: #409eff;
328 |     color: #ffffff;
329 |   }
330 |   .search_parent {
331 |     display: flex;
332 |     justify-content: center;
333 |     align-items: center;
334 |     margin: 20px 0;
335 |   }
336 |   /* .search_div {
337 |     border: 1px solid #dddddd;
338 |     border-radius: 20px;
339 |     width: 150px;
340 |     height: 30px;
341 |     padding-left: 10px;
342 |   } */
343 |   .search_input {
344 |     width: 150px;
345 |     height: 10px;
346 |     border-radius: 50px;
347 |     border: 1px solid #ccc;
348 |     outline: none;
349 |     padding: 10px 0px 10px 10px;
350 |     font-size: 14px;
351 |   }
352 |   .search_input_focus {
353 |     border: 1px solid #409eff;
354 |   }
355 |   ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
356 |     color: rgb(192, 196, 204);
357 |   }
358 |   :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
359 |     color: rgb(192, 196, 204);
360 |   }
361 |   ::-moz-placeholder { /* Mozilla Firefox 19+ */
362 |     color: rgb(192, 196, 204);
363 |   }
364 |   :-ms-input-placeholder { /* Internet Explorer 10-11 */
365 |     color: rgb(192, 196, 204);
366 |   }
367 | </style>
368 | 


--------------------------------------------------------------------------------
/src/components/main.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div id="box">
  3 |   <div class="box">
  4 |     <div class="title">
  5 |       <span :class="{active: leftSelect === data1.length}" @click="selectAll(data1)">课件列表</span>
  6 |       <span>{{leftSelect ? leftSelect : 0}}/{{data1.length}}</span>
  7 |     </div>
  8 | 
  9 |     <div class="search_parent">
 10 |       <!-- <div class="search_div"> -->
 11 |         <input class="search_input" v-model="sourceData" :class="heightLight ? 'search_input_focus' : ''" type="text" @focus="heightLight=true" @blur="heightLight=false" placeholder="请输入课件级别/编号">
 12 |       <!-- </div> -->
 13 |     </div>
 14 | 
 15 |     <div @drop="dropPub($event, 2)" @dragover.prevent class="left">
 16 |       <div
 17 |         @drag="ondrag"
 18 |         @dragstart="dragstart($event, item)"
 19 |         @dragend="dragend"
 20 |         draggable="true"
 21 |         class="hover-color"
 22 |         :class="{active: item.isSelect }"
 23 |         v-on:click="hanldleClick(data1, item.id)"
 24 |         v-for="(item,index) in changeSourceData"
 25 |         :key="index">{{item.value}}</div>
 26 |     </div>
 27 |   </div>
 28 | 
 29 |   <div class="middle">
 30 |     <div v-on:click="moveItem(data2,data1)" :class="{active: rightSelect > 0}"><i class="el-icon-arrow-left"></i></div>
 31 |     <div v-on:click="moveItem(data1, data2)" :class="{active: leftSelect > 0}"><i class="el-icon-arrow-right"></i></div>
 32 |   </div>
 33 | 
 34 |   <div class="box">
 35 |     <div class="title">
 36 |       <span :class="{active: rightSelect === data2.length}" @click="selectAll(data2)">已选课件</span>
 37 |       <span>{{rightSelect ? rightSelect : 0}}/{{data2.length}}</span>
 38 |     </div>
 39 | 
 40 |     <div class="search_parent">
 41 |       <!-- <div class="search_div"> -->
 42 |         <input class="search_input" v-model="targetData" :class="heightLight1 ? 'search_input_focus' : ''" @focus="heightLight1=true" @blur="heightLight1=false" type="text" placeholder="请输入课件级别/编号">
 43 |       <!-- </div> -->
 44 |     </div>
 45 | 
 46 |     <div @drop="dropPub($event, 1)" @dragover.prevent class="right">
 47 |       <div
 48 |       class="hover-color"
 49 |       @drag="ondrag"
 50 |       @dragstart="dragstart($event, item)"
 51 |       @dragend="dragend"
 52 |       draggable="true"
 53 |       :class="{active: item.isSelect }"
 54 |       v-on:click="hanldleClick(data2, item.id)"
 55 |       v-for="(item,index) in changeTargetData"
 56 |       :key="index">{{item.value}}</div>
 57 |     </div>
 58 |   </div>
 59 | </div>
 60 | </template>
 61 | <script>
 62 | import { setTimeout } from 'timers'
 63 | export default {
 64 | props: {
 65 |   sourceLeft: {
 66 |     type: Array
 67 |   },
 68 |   targetRight: {
 69 |     type: Array
 70 |   },
 71 |   value: {
 72 |     type: Array,
 73 |     detault: []
 74 |   }
 75 | },
 76 | data () {
 77 |   return {
 78 |     heightLight: false,
 79 |     heightLight1: false,
 80 |     data1: [],
 81 |     data2:[],
 82 |     target: {
 83 |       x: '',
 84 |       y: '',
 85 |       id: ''
 86 |     },
 87 |     sourceData: '',
 88 |     targetData: '',
 89 |     changeSourceData: [],
 90 |     changeTargetData: []
 91 |   }
 92 | },
 93 | created () {
 94 |   console.log(this.targetRight)
 95 |   this.sourceLeft.forEach(item => {
 96 |     this.data1.push(
 97 |       {
 98 |         id: item.key,
 99 |         value: item.label,
100 |         isSelect: false
101 |       }
102 |     )
103 |   })
104 |   this.changeSourceData = this.data1
105 |   this.changeTargetData = this.data2
106 | },
107 | mounted () {
108 |   // console.log(this.targetRight)
109 |   let empty = []
110 |     console.log(this.targetRight)
111 |     if (this.targetRight.length > 0) {
112 |       this.targetRight.forEach(item => {
113 |         empty.push(
114 |           {
115 |             id: item.key,
116 |             value: item.label,
117 |             isSelect: false
118 |           }
119 |         )
120 |       })
121 |       this.data2 = empty
122 |       this.changeTargetData = empty
123 |     }
124 | },
125 | watch: {
126 |   sourceLeft () {
127 | 
128 |     this.sourceLeft.forEach(item => {
129 |       this.data1.push(
130 |         {
131 |           id: item.key,
132 |           value: item.label,
133 |           isSelect: false
134 |         }
135 |       )
136 |     })
137 |     this.changeSourceData = this.data1
138 |     this.changeTargetData = this.data2
139 |   },
140 |   value () {
141 |     // console.log(this.value)
142 |     // 通过编辑按钮的接口拿到已经存在的课件id，然后遍历源数据，删除已经存在的课件
143 |     if (this.value.length > 0) {
144 |       this.value.forEach(item => {
145 |         this.data1.forEach((v,i) => {
146 |           if (item == v.id) {
147 |             this.data1.splice(i,1)
148 |           }
149 |         })
150 |       })
151 |       // console.log(this.data1, 'changesourceData')
152 |     }
153 |   },
154 |   targetRight () {
155 |     let empty = []
156 |     console.log(this.targetRight)
157 |     if (this.targetRight.length > 0) {
158 |       this.targetRight.forEach(item => {
159 |         empty.push(
160 |           {
161 |             id: item.key,
162 |             value: item.label,
163 |             isSelect: false
164 |           }
165 |         )
166 |       })
167 |       this.data2 = empty
168 |       this.changeTargetData = empty
169 |     }
170 |   },
171 |   sourceData (val) {
172 |     let emptyArr = []
173 |     if (val) {
174 |       for (let i = 0; i < this.data1.length; i++) {
175 |         if (this.data1[i].value.indexOf(val) != -1) {
176 |           emptyArr.push(this.data1[i])
177 |         }
178 |       }
179 |       this.changeSourceData = emptyArr
180 |     } else {
181 |       this.changeSourceData = this.data1
182 |     }
183 |   },
184 |   targetData (val) {
185 |     let emptyArr = []
186 |     if (val) {
187 |       for (let i = 0; i < this.data2.length; i++) {
188 |         if (this.data2[i].value.indexOf(val) != -1) {
189 |           emptyArr.push(this.data2[i])
190 |         }
191 |       }
192 |       this.changeTargetData = emptyArr
193 |     } else {
194 |       this.changeTargetData = this.data2
195 |     }
196 |   }
197 | },
198 | methods: {
199 |   ondrag(event) {
200 |     this.target.y = event.y
201 |     this.target.x = event.x
202 |   },
203 |   dropPub (event, type) {
204 |     if (type == 1) {
205 |       this.drop(event,this.data1, this.data2, type)
206 |     } else {
207 |       this.drop(event,this.data2, this.data1, type)
208 |     }
209 |   },
210 |   drop (event,handle, target, type) {
211 |     // 被拖拽数据中的id值
212 |     let id = event.dataTransfer.getData('id')
213 |     handle.forEach((item,index)=>{
214 |       if (item.id == id) {
215 |         let temp = handle.splice(index,1)
216 |         temp[0].isSelect = false
217 |         target.push(temp[0])
218 |       }
219 |     })
220 |     this.resort(event, target, type)
221 |   },
222 |   resort (event, target, type) {
223 |     let eles = event.currentTarget.children
224 |     // console.log(eles, target)
225 |     let emptyArray = []
226 |     // type=1 从左往右拖拽 type=2 从右往左拖拽
227 |     if (type == 1) {
228 |       target.forEach(item => {
229 |         emptyArray.push(item.id)
230 |       })
231 |       // v-model 可以监听这个input事件的触发
232 |       this.$emit('input', emptyArray)
233 |     }
234 |     if (type == 2) {
235 |       let tempId = event.dataTransfer.getData('id')
236 |       this.changeTargetData.forEach(item => {
237 |         if (item.id != tempId) {
238 |           emptyArray.push(item.id)
239 |         }
240 |       })
241 |       // v-model 可以监听这个input事件的触发
242 |       this.$emit('input', emptyArray)
243 |     }
244 |     // 两个框拖拽数据
245 |     for (let i = 0; i < target.length; i++) {
246 |       if (target[i].id == this.target.id) {
247 |         target[i].y = this.target.y
248 |       } else {
249 |         // 获取元素在页面上位置，纵坐标
250 |         target[i].y = eles[i].getBoundingClientRect().y
251 |       }
252 |     }
253 |     // 单个框中换位置
254 |     for (let i = 0; i < target.length-1; i++) {
255 |       for (let j = 0; j < target.length-i-1; j++) {
256 |         if (target[j].y > target[j+1].y) {
257 |           let swap = target[j]
258 |           target[j] = target[j+1]
259 |           target[j+1] = swap
260 |         }
261 |       }
262 |     }
263 |     // vue强制更新视图
264 |     this.$forceUpdate()
265 |   },
266 |   dragstart (event,item) {
267 |     this.target.id = item.id
268 |     event.dataTransfer.setData('id', item.id)
269 |   },
270 |   dragend (event) {
271 |     event.dataTransfer.clearData()
272 |   },
273 |   hanldleClick (data,id) {
274 |     data.forEach(element => {
275 |       if (element.id == id) {
276 |         element.isSelect = !element.isSelect
277 |       }
278 |     })
279 |   },
280 |   moveItem (handle, target) {
281 |     let temp = handle.filter(item=> {
282 |       return item.isSelect == true
283 |     })
284 |     if (temp.length <=0) return false
285 |     temp.forEach(item=> {
286 |       let index = handle.indexOf(item)
287 |       handle.splice(index,1)
288 |       item.isSelect = false
289 |       target.push(item)
290 |     })
291 |   },
292 |   selectAll (data) {
293 |     let isSelectAll = data.every(item => {
294 |       return item.isSelect == true
295 |     })
296 |     data.forEach(item=> {
297 |       if (isSelectAll) {
298 |         item.isSelect = false
299 |       } else {
300 |         item.isSelect = true
301 |       }
302 |     })
303 |   }
304 | },
305 | computed: {
306 |   leftSelect () {
307 |     if (this.data1.length === 0) return false
308 |     let arr =  this.data1.filter(item=> {
309 |       return item.isSelect == true
310 |     })
311 |     return arr.length
312 |   },
313 |   rightSelect () {
314 |     if (this.data2.length == 0) return false
315 |     let arr =  this.data2.filter(item=> {
316 |       return item.isSelect == true
317 |     })
318 |     return arr.length
319 |   }
320 | }
321 | }
322 | </script>
323 | <style>
324 |   * {
325 |     margin: 0;
326 |     padding: 0;
327 |   }
328 |   #box {
329 |     display: flex;
330 |     justify-content: center;
331 |     align-items: center;
332 |     margin-top: 45px;
333 |   }
334 |   .box {
335 |     border: 1px solid rgb(235, 238, 245);
336 |   }
337 |   .box .title {
338 |     font-size: 14px;
339 |     box-sizing: border-box;
340 |     padding-right: 10px;
341 |     display: flex;
342 |     justify-content: space-between;
343 |     width: 245px;
344 |     height: 40px;
345 |     line-height: 40px;
346 |     background: #f5f7fa;
347 |   }
348 |   .box .title span:first-child {
349 |     display: inline-block;
350 |     background: #f5f7fa;
351 |     background-image: url(../../public/check-box-outline-blank.png);
352 |     background-repeat: no-repeat;
353 |     background-position: 10px center;
354 |     background-size: 20px 20px;
355 |     padding-left: 35px;
356 |     cursor: pointer;
357 |   }
358 |   .box .title span:first-child.active {
359 |     background-image: url(../../public/check_box.png);
360 |   }
361 |   .left, .right {
362 |     width: 245px;
363 |     height: 250px;
364 |     padding: 5px 0;
365 |     box-sizing: border-box;
366 |     overflow-y: scroll;
367 |     overflow-x:hidden;
368 |   }
369 |   .left >div , .right > div {
370 |     cursor: pointer;
371 |     text-align: left;
372 |     background-image: url(../../public/check-box-outline-blank.png);
373 |     background-repeat: no-repeat;
374 |     background-position: 10px center;
375 |     background-size: 20px 20px;
376 |     font-size: 14px;
377 |     padding-left: 35px;
378 |     line-height: 30px;
379 |   }
380 |   .left > div.active , .right > div.active {
381 |     background-image: url(../../public/check_box.png);
382 |   }
383 |   .left > div.hover-color:hover, .right > div.hover-color:hover {
384 |     color: rgb(64, 158, 255);
385 |   }
386 |   .middle {
387 |     margin:0 20px;
388 |   }
389 |   .middle > div {
390 |     margin: 10px 0;
391 |     display: flex;
392 |     justify-content: center;
393 |     align-items: center;
394 |     cursor: pointer;
395 |     width: 40px;
396 |     height: 40px;
397 |     border-radius: 50%;
398 |     border: 1px solid #dcdfe6;
399 |     font-size: 12px;
400 |     background-color: #f5f7fa;
401 |     color: #c0c4cc;
402 |   }
403 |   .middle > div.active {
404 |     background-color: #409eff;
405 |     border-color: #409eff;
406 |     color: #ffffff;
407 |   }
408 |   .search_parent {
409 |     display: flex;
410 |     justify-content: center;
411 |     align-items: center;
412 |     margin: 20px 0;
413 |   }
414 |   /* .search_div {
415 |     border: 1px solid #dddddd;
416 |     border-radius: 20px;
417 |     width: 150px;
418 |     height: 30px;
419 |     padding-left: 10px;
420 |   } */
421 |   .search_input {
422 |     width: 220px;
423 |     height: 10px;
424 |     border-radius: 50px;
425 |     border: 1px solid #ccc;
426 |     outline: none;
427 |     padding: 10px 0px 10px 10px;
428 |     font-size: 14px;
429 |     text-align: center;
430 |   }
431 |   .search_input_focus {
432 |     border: 1px solid #409eff;
433 |   }
434 |   ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
435 |     color: rgb(192, 196, 204);
436 |   }
437 |   :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
438 |     color: rgb(192, 196, 204);
439 |   }
440 |   ::-moz-placeholder { /* Mozilla Firefox 19+ */
441 |     color: rgb(192, 196, 204);
442 |   }
443 |   :-ms-input-placeholder { /* Internet Explorer 10-11 */
444 |     color: rgb(192, 196, 204);
445 |   }
446 | </style>
447 | 


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