俩个列表内的元素左右移动

  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>