人之所以先入为主，因为他就握着这么几把锁匙。如果他手上的锁匙非常多时，他在开门时就会稍微停下来，认真挑选了。因此熟悉掌握越多的原生API就越好，我们就才获取更优的选项。换一个思路，在拖动时（mousedown）保存当前行及其样式与坐标，拖动中取得鼠标所在位置上的元素，这个元素是使用一个巧妙的API取得document.elementFromPoint(x,y)。通常情况，我们取得的是TD，当然如果你在里面塞进一个DIV，那就是DIV罗。然后我们再取得其TR元素，然后比较mousedown时保存的TR元素是不是同一个元素，不是我们才做进一步的操作。这时我们就要判其是向上移向下移，简单的减法而已。接着是交换两行。最后当mouseup时，还原行的样式就是！
//http://www.cnblogs.com/rubylouvre/archive/2011/04/16/2018148.html by 司徒正美 window.onload = function(){ //绑定事件 var addEvent = document.addEventListener ? function(el,type,callback){ el.addEventListener( type, callback, !1 ); } : function(el,type,callback){ el.attachEvent( "on" + type, function(){ return callback.call(el, event) } ); } //精确获取样式 var getStyle = document.defaultView ? function(el,style){ return document.defaultView.getComputedStyle(el, null).getPropertyValue(style) } : function(el,style){ style = style.replace(/\-(\w)/g, function($, $1){ return $1.toUpperCase(); }); return el.currentStyle[style]; } var dragManager = { dragObj : false, clientY:0, draging:function(e){//mousemove时拖动行 var target = e.target || e.srcElement; if(target.nodeName === "TD"){ target = target.parentNode; if(window.getSelection){//w3c window.getSelection().removeAllRanges(); }else if(document.selection){ document.selection.empty();//IE } var dragObj = dragManager.dragObj; if (dragObj) { //如果当前有一个元素节点被拖动 var y = e.clientY; var down = y > dragManager.clientY;//是否向下移动 var tr = document.elementFromPoint(e.clientX,e.clientY).parentNode; dragManager.clientY = y; if(dragObj !== tr){ tr.parentNode.insertBefore(dragObj, (down ? tr.nextSibling : tr)); } } } }, dragStart:function(e){ var target = e.target || e.srcElement; if(target.nodeName === "TD"){ target = target.parentNode; dragManager.dragObj = target; if(!target.getAttribute("data-background")){ var background = getStyle(target,"background-color"); target.setAttribute("data-background",background) } //显示为可移动的状态 target.style.backgroundColor = "#ccc"; target.style.cursor = "move"; dragManager.clientY = e.clientY; } }, dragEnd:function(e){ var target = e.target || e.srcElement; if(target.nodeName === "TD"){ target = target.parentNode; var dragObj = dragManager.dragObj if (dragObj) { dragObj.style.backgroundColor = dragObj.getAttribute("data-background"); dragObj.style.cursor = "default"; dragManager.dragObj = false; } } }, main:function(el){ addEvent(el,"mousedown",dragManager.dragStart); addEvent(document,"mousemove",dragManager.draging); addEvent(document,"up",dragManager.dragEnd); } } var el = document.getElementById("table"); dragManager.main(el); }
最新评论