1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8"/>
5 <title>穿梭框</title>
6 <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
7 <link rel="stylesheet" type="text/css" href="css/index.css">
8 <script src='js/vue.js'></script>
9 <script src='js/index.js'></script>
10 </head>
11 <body>
12 <div id='my'>
13 <div class="container">
14 <div class="row">
15 <!--左侧-->
16 <div class="col-xs-5 col-sm-5" >
17 <div class="panel panel-success">
18 <!--标题-->
19 <div class="panel-heading">
20 <h3 class="panel-title">列表1<span>2</span></h3>
21 </div>
22 <!--内容-->
23 <div class="panel-body panel-height">
24 <ul>
25
26 <li v-for="(data1,index) in data_left">
27 <input :value="index" type="checkbox" v-model="check_val_left">
28 {{data1.name}}
29 </li>
30 </ul>
31 </div>
32 </div>
33 </div>
34 <!--中间-->
35 <div class="col-xs-2 col-sm-2 transfer">
36 <div class="transfer-table">
37 <a class="transfer-cell" @click="left_move()">>></a>
38 <a class="transfer-cell" @click="right_move()"><<</a>
39 </div>
40
41 </div>
42 <!--右侧-->
43 <div class="col-xs-5 col-sm-5" >
44 <div class="panel panel-success">
45 <!--标题-->
46 <div class="panel-heading">
47 <h3 class="panel-title">列表2 <span>2</span></h3>
48 </div>
49 <!--内容-->
50 <div class="panel-body panel-height">
51 <ul>
52 <li v-for="(data2,index2) in data_right">
53 <input :value="index2" type="checkbox" v-model="check_val_right">
54 {{data2.name}}
55 </li>
56 </ul>
57 </div>
58 </div>
59 </div>
60 </div>
61 </div>
62 </div>
63 </body>
64
65 <script>
66 var vue_my=new Vue({
67 el: '#my',
68 data: {
69 data_left: [
70 {id:1,name:'北京'},
71 {id:2,name:'上海'},
72 {id:3,name:'深圳'},
73 ],
74 data_right: [
75 {id:11,name:'重庆'},
76 {id:12,name:'成都'},
77 {id:13,name:'贵州'},
78 ],
79 check_val_left:[],
80 check_val_right:[],
81 },
82 methods:{
83 left_move:function () {
84 //要把这个数组排序
85 this.check_val_left.sort(sortNumber);
86 this.check_val_left.forEach((item,index,array)=>{
87 //执行代码
88 //console.log(item);
89 //将data_left对应索引的数据移动到右边去
90 this.data_right.push(this.data_left[item]);
91 //console.log(this.data_left);
92 this.data_left.splice(item, 1);
93 });
94 //忘记把这个数组置空了
95 this.check_val_left=[];
96 },
97 right_move:function () {
98 //console.log(this.check_val_right);
99 this.check_val_right.sort(sortNumber);
100 this.check_val_right.forEach((item,index,array)=>{
101 //执行代码
102 //console.log(item);
103 //将data_left对应索引的数据移动到右边去
104 this.data_left.push(this.data_right[item]);
105 //console.log(this.data_left);
106 this.data_right.splice(item, 1);
107 });
108 this.check_val_right=[];
109 }
110 }
111 })
112 </script>
113
114 <script>
115 function sortNumber(a, b)
116 {
117 return b - a;
118 }
119 </script>
120
121 </html>