1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 html,body{
8 width: 100%;
9 height: 100%;
10 margin: 0;
11 padding: 0;
12 font-family: "Microsoft Yahei",Arial;
13 background-color: #b1b1b1;
14 -webkit-user-select:none;
15 -moz-user-select:none;
16 -ms-user-select:none;
17 user-select:none;
18 }
19 ul,li{
20 list-style: none;
21 margin: 0;
22 padding: 0;
23 }
24 .container{
25 width: 540px;
26 height: 400px;
27 padding: 50px 20px;
28 background-color: #fff;
29 border-radius: 2px;
30 margin: 0 auto;
31 margin-top: 10%;
32 }
33 .container ul{
34 width: 40%;
35 height: 100%;
36 background-color: #fafafa;
37 border: 1px solid #e5e5e5;
38 float: left;
39 }
40 .container .data-list li{
41 width: 100%;
42 height: 36px;
43 line-height: 36px;
44 text-indent: 10px;
45 color: #666;
46 font-size: 14px;
47 cursor: pointer;
48 }
49 .container .data-list li:hover{
50 background-color: #039ae3;
51 color: #fff;
52 }
53 .container .data-list li.selected{
54 background-color: #666;
55 color: #fff;
56 }
57 .container .data-list li.moving{
58 position: absolute;
59 width: auto;
60 padding-right: 15px;
61 top:0;
62 left: 0;
63 }
64 .toolbar{
65 margin-top: 25%;
66 width: 18%;
67 float: left;
68 }
69 .toolbar .button{
70 width: 80px;
71 height: 36px;
72 display: block;
73 margin: 20px auto;
74 border: 1px solid #d9d9d9;
75 text-align: center;
76 line-height: 36px;
77 text-decoration: none;
78 color: #333;
79 background: #f3f3f3;
80 font-size: 14px;
81 }
82 .toolbar .button:hover{
83 background-color: #039ae3;
84 color: #fff;
85 }
86 </style>
87 </head>
88 <body>
89 <div class="container">
90 <ul id="left-list" class="data-list list-left">
91 <li>刘备</li>
92 <li>诸葛亮</li>
93 <li>关羽</li>
94 <li>张飞</li>
95 </ul>
96 <div class="toolbar">
97 <a id="add" class="button" href="#">添加</a>
98 <a id="del" class="button" href="#">删除</a>
99 </div>
100 <ul id="right-list" class="data-list list-right">
101 <li>孙权</li>
102 <li>甘宁</li>
103 <li>黄盖</li>
104 </ul>
105 </div>
106 <script>
107 window.onload=function () {
108 var leftList=document.getElementById("left-list")
109 var rightList=document.getElementById("right-list")
110 var movingItem; //移动的列表
111 //列表点击事件
112 var itemClick=function (event) {
113 event.target.className=event.target.className?"":"selected"
114 }
115 //左右俩个列表绑定onmouseup事件
116 leftList.onmouseup = rightList.onmouseup = function(event){
117 if(event.target.tagName==="UL"&&movingItem){
118 event.target.appendChild(movingItem);
119 movingItem = null;
120 }
121 }
122
123
124 //给它们绑定click事件
125 for(var i=0;i<leftList.children.length;i++){
126 leftList.children[i].onclick=itemClick
127 leftList.children[i].ondblclick=function (event) {
128 var target=event.target
129 movingItem = target;
130 target.className = "selected moving";
131 target.style.left=(event.clientX+10)+"px"
132 target.style.top=(event.clientY+10)+"px"
133 document.onmousemove=function (event) {
134 target.style.left=(event.clientX+10)+"px"
135 target.style.top=(event.clientY+10)+"px"
136 }
137 document.onmouseup=function (event) {
138 if(event.target.nodeName==="UL"){
139 target.className=""
140 document.onmousemove = null;
141 movingItem = null;
142 }
143 }
144 }
145
146 }
147 for(var i=0;i<rightList.children.length;i++){
148 rightList.children[i].onclick=itemClick
149 rightList.children[i].ondblclick=function (event) {
150 var target=event.target
151 movingItem = target;
152 target.className = "selected moving";
153 target.style.left=(event.clientX+10)+"px"
154 target.style.top=(event.clientY+10)+"px"
155 document.onmousemove=function (event) {
156 target.style.left=(event.clientX+10)+"px"
157 target.style.top=(event.clientY+10)+"px"
158 }
159 document.onmouseup=function (event) {
160 if(event.target.nodeName==="UL"){
161 target.className=""
162 document.onmousemove = null;
163 movingItem = null;
164 }
165 }
166 }
167 }
168 document.getElementById("add").onclick= document.getElementById("del").onclick=function (event) {
169 //用来保存选择的列表
170 //选择以后，把列表保存到arr里面
171 //使用的原因是多选的时候直接移动，ULde Length会改变
172 var arr=[]
173 var target=event.target.id==="add" ? leftList : rightList
174 var target2=target===leftList ? rightList : leftList
175 for(var i=0;i<target.children.length;i++){
176 if(target.children[i].className){
177 arr.push(target.children[i])
178 target.children[i].className=""
179 }
180 }
181 for(var i=0;i<arr.length;i++){
182 target2.appendChild(arr[i])
183 }
184 }
185
186 }
187 </script>
188 </body>
189 </html>
