关键字：HTML5, Drag&Drop, JavaScript, CSS
运行环境：Chrome
<!DOCTYPE html> <html> <head> <title>example</title> <style type="text/css"> .main-area { margin-left: 10%; margin-right: 10%; min-width: 600px; } ul { padding-left: 0; text-align:center; } li { word-break: break-all; display: inline-block; width: 400px; height: 200px; margin: 3px; border-radius: 3px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 1); } </style> </head> <body> <script> // on source element function dragstart (ev) { ev.dataTransfer.effectAllowed = "move"; ev.dataTransfer.setData("srcId", ev.currentTarget.id); ev.dataTransfer.setDragImage(ev.currentTarget, 0, 0); } function dragend(ev) { ev.dataTransfer.clearData("srcId"); } // on target element function dragover(ev) { ev.preventDefault(); } function drop(ev) { var srcId = ev.dataTransfer.getData("srcId"); var srcObj = document.getElementById(srcId); if(srcObj != ev.currentTarget){ var list = document.getElementById('list'); list.insertBefore(srcObj, ev.currentTarget); } } </script> <div id='main-area'> <ul id='list'> <li id='1' draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)" ondragover="dragover(event)" ondrop="drop(event)"> 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 </li><li id='2' draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)" ondragover="dragover(event)" ondrop="drop(event)"> 222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222 </li><li id='3' draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)" ondragover="dragover(event)" ondrop="drop(event)"> 333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333 </li><li id='4' draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)" ondragover="dragover(event)" ondrop="drop(event)"> 444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444 </li> </ul> </div> </body> </html>
注：如果每个li之间换行，将会有空格产生。参考问题：http://stackoverflow.com/questions/25520904/html5-reorder-the-children-li-of-ul-by-drag-and-drop-the-borders-between-li-el