参考资料：
^_^肥仔John ： http://www.cnblogs.com/fsjohnhuang/p/3961066.html
File API ： http://www.ibm.com/developerworks/cn/web/1101_hanbf_fileupload/
浏览器内拖拽
Demo : Demo
浏览器内拖拽Demo截图：
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ margin:0;padding:0; } 8 li{ list-style: none; } 9 .cr:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;} 10 .cr{*zoom:1;} 11 12 .conter{ width:900px; margin:0 auto; } 13 .left{ float: left;width:420px;} 14 .right{ float:right;width:420px; } 15 .left h2{margin-top:50px} 16 .ul{ margin:50px 0; } 17 .ul li{ height:30px;line-height:30px; font-size: 14px; text-align: center; border:1px solid #333; margin-top:-1px; } 18 .remove{ } 19 .remove .ul{ margin:0;min-height: 60px; border:1px solid #333; } 20 .ul.auto{ min-height:30px; border:none; } 21 .img{ position: absolute;left:0;top:0px;} 22 </style> 23 <script> 24 window.onload = function(){ 25 26 var oUl = document.getElementById('ul'); 27 var aLis = null; 28 var oRemove = document.getElementById('remove'); 29 var oImg = document.getElementById('img'); 30 var oUl2 = document.getElementById('ul2'); 31 var arrTop; 32 var lastT = 0; 33 var btn = false; 34 35 setLiTop(); 36 37 function setLiTop (){ 38 39 arrTop = []; 40 btn = false; 41 aLis = oUl.getElementsByTagName('li'); 42 43 for( var i=0;i<aLis.length;i++ ){ 44 45 aLis[i].index = i; 46 47 var top = aLis[i].offsetTop; 48 49 arrTop.push( top ); 50 51 } 52 53 for( var i=0;i<aLis.length;i++ ){ 54 55 aLis[i].ondragstart = function( ev ){ 56 57 var ev = window.event || ev; 58 59 this.style.background = '#ccc'; 60 61 var t = -this.offsetHeight/2; 62 63 var l = -this.offsetWidth/2; 64 65 ev.dataTransfer.setData('index',this.index); // 设置数据,可以看成一个json; 66 67 ev.dataTransfer.effectAllowed = 'move'; //设置鼠标样式 68 69 ev.dataTransfer.setDragImage(oImg,oImg.offsetWidth/2,0); //设置托转出的假图片企业也没多大用 详细文章：http://blog.csdn.net/isaisai/article/details/39892427 70 71 } 72 73 aLis[i].ondragover = function( ev ){ 74 75 var ev = window.event || ev; 76 77 lastT = this.offsetTop; 78 79 ev.preventDefault(); 80 81 } 82 83 aLis[i].ondragend = function( ev ){ 84 85 this.style.background = ''; 86 87 var ev = window.event || ev; 88 89 90 for( var i=0,len=aLis.length;i<len;i++ ){ 91 92 if( lastT == arrTop[i] ){ 93 94 if( !btn ){ 95 96 if( i == 0){ 97 98 oUl.insertBefore( this, aLis[i] ); 99 100 }else{ 101 102 oUl.insertBefore( this, aLis[i+1] ); 103 104 } 105 106 setLiTop(); 107 108 } 109 } 110 } 111 112 setLiTop(); 113 114 } 115 116 } 117 118 } 119 120 121 oUl2.ondragenter = function(){ 122 123 this.style.backgroundColor = 'red'; 124 btn = true; 125 126 } 127 128 129 130 oUl2.ondragover = function(ev){ 131 132 var ev = window.event || ev; 133 ev.preventDefault(); 134 135 } 136 137 oUl2.ondragleave = function(){ 138 139 this.style.background = ''; 140 141 btn = false; 142 143 }; 144 145 oUl2.ondrop = function(ev){ 146 147 this.className = 'ul auto'; 148 149 var index = parseInt( ev.dataTransfer.getData('index') ); // 取数据 150 151 var oLi = document.createElement('li'); 152 153 oLi.innerHTML = aLis[index].innerHTML; 154 155 oUl.removeChild(aLis[index]); 156 157 oUl2.appendChild( oLi ); 158 159 this.style.background = ''; 160 161 } 162 163 164 } 165 166 167 </script> 168 </head> 169 <body> 170 <div class="conter cr"> 171 <div class="left"> 172 <h2> 173 删除列表 174 </h2> 175 <div class="remove" id="remove"> 176 <ul class="ul" id="ul2"> 177 178 </ul> 179 </div> 180 </div> 181 182 <div class="right"> 183 184 <ul class="ul" id="ul"> 185 <li draggable="true"> 186 音乐播放列表1 187 </li> 188 <li draggable="true"> 189 音乐播放列表2 190 </li> 191 <li draggable="true"> 192 音乐播放列表3 193 </li> 194 <li draggable="true"> 195 音乐播放列表4 196 </li> 197 <li draggable="true"> 198 音乐播放列表5 199 </li> 200 <li draggable="true"> 201 音乐播放列表6 202 </li> 203 <li draggable="true"> 204 音乐播放列表7 205 </li> 206 </ul> 207 <img id="img" src="http://static.cnblogs.com/images/logo_small.gif" alt="" > 208 </div> 209 210 </div> 211 212 213 </body> 214 </html>