<br /><!doctype html><br /><html><br /> <head><br /> <title>行拖動 by 司徒正美</title><br /> <script><br /> //防止拖動時內容被選中<br /> var getStyleName= (function(){<br /> var prefixes = ['', '-ms-','-moz-', '-webkit-', '-khtml-', '-o-'];<br /> var reg_cap = /-([a-z])/g;<br /> function getStyleName(css, el) {<br /> el = el || document.documentElement;<br /> var style = el.style,test;<br /> for (var i=0, l=prefixes.length; i < l; i++) {<br /> test = (prefixes[i] + css).replace(reg_cap,function($0,$1){<br /> return $1.toUpperCase();<br /> });<br /> if(test in style){<br /> return test;<br /> }<br /> }<br /> return null;<br /> }<br /> return getStyleName;<br /> })();<br /> function log(s){<br /> window.console && window.console.log(s);<br /> }<br /> var userSelect = getStyleName("user-select");<br /> function onUnselect(){<br /> if(typeof userSelect === "string"){<br /> return document.documentElement.style[userSelect] = "none";<br /> }<br /> document.unselectable = "on";<br /> document.selectstart = function(){<br /> return false;<br /> }<br /> };<br /> function offUnselect(){<br /> if(typeof userSelect === "string"){<br /> return document.documentElement.style[userSelect] = "text";<br /> }<br /> document.unselectable = "off";<br /> document.selectstart = null;<br /> };<br /> //事件綁定<br /> var addEvent = document.addEventListener ? function(el,type,callback){<br /> el.addEventListener( type, callback, false );<br /> } : function(el,type,callback){<br /> el.attachEvent( "on" + type, callback );<br /> }<br /> window.onload = function(){<br /> var dataTransfer =document.createElement("table"), draging = false, tr1;<br /> dataTransfer.id = "dataTransfer";<br /> var style = dataTransfer.style<br /> document.body.appendChild(dataTransfer);<br /> var table = document.getElementById("target");<br /> addEvent(table,"mousedown",function(e){<br /> e = e || event;<br /> var target = e.target || e.srcElement;<br /> if(target.tagName === "TD"){<br /> tr1 = target.parentNode;<br /> dataTransfer.rowIndex = tr1.rowIndex;<br /> dataTransfer.appendChild(tr1);<br /> style.display = "";<br /> style.position = "absolute";<br /> style.left = (e.clientX+20)+"px";<br /> style.top = (e.clientY+10)+"px";<br /> draging = true;<br /> onUnselect();<br /> }<br /> });<br /> addEvent(table,"mousemove",function(e){<br /> if(draging){<br /> style.left = (e.clientX+20)+"px";<br /> style.top = (e.clientY+10)+"px";<br /> }<br /> });</p><p> addEvent(document,"mouseup",function(e){<br /> if(draging){<br /> var td = document.elementFromPoint(e.pageX, e.pageY);<br /> if(td.tagName == "TD"){<br /> var tr2 = td.parentNode;<br /> tr2.parentNode.insertBefore(tr1,tr2.nextSibling);<br /> log("移動位置")<br /> }else{<br /> log("還原位置");<br /> log( dataTransfer.rowIndex)<br /> var tr2 = table.rows[ dataTransfer.rowIndex ];<br /> tr2.parentNode.insertBefore(tr1,tr2);</p><p> }<br /> style.display = "none";<br /> style.position = "";<br /> draging = false;<br /> offUnselect();<br /> }<br /> });</p><p> }</p><p> </script><br /> <style><br /> .blue_table {<br /> border: 1px solid #4d6366;<br /> border-collapse: collapse;<br /> width: 90%;<br /> background:#B0E0E6;<br /> }<br /> .blue_table td ,.blue_table thead th{<br /> border: 1px solid #4d6366;<br /> }</p><p> .blue_table thead th{<br /> background: #8080c0;<br /> color:#fff;<br /> font-weight: normal;<br /> }</p><p> #dataTransfer {<br /> background: #36daff;<br /> opacity:0.85;<br /> background: -webkit-gradient(linear, left top, right top, from(#36daff), to(#fff));<br /> background: -moz-linear-gradient(left, #36daff, #fff);<br /> background:-o-linear-gradient(left, #36daff, #fff);<br /> box-shadow:10px 10px 5px #444;<br /> -moz-box-shadow:10px 10px 5px #444;<br /> -webkit-box-shadow:10px 10px 5px #444;<br /> }</p><p> </style><br /> </head><br /> <body></p><p> <table class="blue_table" id="target"><br /> <thead><br /> <tr><br /> <th>事件名稱 </th><th>觸發機制</th><th>綁定節點</th><th>相應相容事件</th><th>常見操作 </th><br /> </tr><br /> </thead><br /> <tbody><br /> <tr><br /> <td><br /> ondragstart<br /> </td><br /> <td><br /> 當滑鼠左鍵點擊某個可拖動節點開始拖拽時。<br /> </td><br /> <td><br /> 拖動節點<br /> </td><br /> <td><br /> onmousedown, ondraggesture<br /> </td><br /> <td><br /> 對 DataTransfer 的資料進行初始化。初始化一些資源。<br /> </td><br /> </tr><br /> <tr><br /> <td><br /> ondrag<br /> </td><br /> <td><br /> 當拖拽進行時，在拖拽結束之前，在 dragstart 之後。<br /> </td><br /> <td><br /> 拖動節點<br /> </td><br /> <td><br /> onmousemove<br /> </td><br /> <td><br /> 對拖動節點的位置資訊進行處理。<br /> </td><br /> </tr><br /> <tr><br /> <td><br /> ondragenter<br /> </td><br /> <td><br /> 拖動節點進入放置容器時。<br /> </td><br /> <td><br /> 放置容器<br /> </td><br /> <td><br /> onmouseenter<br /> </td><br /> <td><br /> 對放置容器的樣式進行修改。<br /> </td><br /> </tr><br /> <tr><br /> <td><br /> ondragover<br /> </td><br /> <td><br /> 拖動節點在放置容器上方時。<br /> </td><br /> <td><br /> 放置容器<br /> </td><br /> <td><br /> onmouseover<br /> </td><br /> <td><br /> 判斷拖動的節點是否被放置容器接受。<br /> </td><br /> </tr><br /> <tr><br /> <td><br /> ondragleave<br /> </td><br /> <td><br /> 拖動節點離開放置容器上方時。<br /> </td><br /> <td><br /> 放置容器<br /> </td><br /> <td><br /> ondragexit<br /> </td><br /> <td><br /> 對放置容器的樣式進行修改。<br /> </td><br /> </tr><br /> <tr><br /> <td><br /> ondrop<br /> </td><br /> <td><br /> 拖動節點在放置容器上方鬆開滑鼠左鍵時。<br /> </td><br /> <td><br /> 放置容器<br /> </td><br /> <td><br /> ondragdrop<br /> </td><br /> <td><br /> 對 DataTransfer 的資料進行處理。對 DOM 節點進行操作。<br /> </td><br /> </tr><br /> <tr><br /> <td><br /> ondragend<br /> </td><br /> <td><br /> 鬆開滑鼠左鍵時，如 drop 事件觸發，則在 drop 事件之後。<br /> </td><br /> <td><br /> 拖動節點<br /> </td><br /> <td><br /> onmouseup<br /> </td><br /> <td><br /> 釋放在 dragstart 中建立的資源。<br /> </td><br /> </tr><br /> </tbody><br /> </table></p><p> </body><br /></html><br />
運行代碼
