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>