줄 드래그의 실현 사고방식은 매우 간단하다. 한 줄을 선택하고 위로 드래그하면 위의 줄과 위치를 교환하고 아래로 드래그하면 아래의 줄과 위치를 교환한다.문제는 어떻게 교환행을 얻는가이다.나는 매우 상세한 자습서를 본 적이 있다. 그것은 표 안의 각 줄의 높이와 Y 좌표를 계산해 낸다. 다시 말하면 e.pageX가 [rowTop,rowBottom] 구간 안에 있는지 비교한다.그러나 이것은 두 번째 문제를 가져온다. 몇 줄이면 여러 개의 이런 구간이 있다.따라서 해법은 이벤트 원본을 취하는 대상이 되고 그 부모 대상을 위로 취한다. 만약에 그 부모 대상이TR 요소라면 그 [rowTop,rowBottom] 구간을 취한다.사고방식이 매우 직접적이고 객관적으로 제한을 준다. 대리 드래그를 사용할 수 없다.에이전트를 드래그하든 실물을 드래그하든 마우스를 움직이는 과정에서만 계산량이 많지만 다행히 IE가 감당하는 범위 안에 있다.더 좋은 방법이 있나요?
사람이 선입견을 가진 이유는 그가 이렇게 몇 개의 자물쇠를 쥐고 있기 때문이다.만약 그의 손에 자물쇠가 매우 많을 때, 그는 문을 열 때 약간 멈추고 진지하게 골랐다.따라서 더 많은 기본 API를 숙지할수록 더 좋은 옵션을 얻을 수 있습니다.다른 사고방식으로 드래그할 때 (mousedown) 현재 줄과 스타일과 좌표를 저장하고 드래그할 때 마우스가 있는 위치의 요소를 얻는다. 이 요소는 교묘한 API를 사용하여document을 얻는다.elementFromPoint(x,y).통상적으로, 우리가 얻은 것은 TD이다. 물론, 만약 당신이 안에 DIV를 넣는다면, 그것은 DIV로다.그리고 우리는 TR 요소를 얻은 다음에 mousedown에 저장된 TR 요소가 같은 요소인지, 같은 요소가 아닌지를 비교한 다음에 우리는 진일보한 조작을 했다.이때 우리는 그것이 위로 이동하고 아래로 이동하는 간단한 감법이라고 판결해야 한다.이어서 두 줄을 바꾸고 insertBefore를 사용합니다.마지막으로 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, callback );
        }
        // 
        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 = {
          y:0,
          draging:function(e){//mousemove 
            var handler = dragManager.handler;
            if(handler){
              e = e || event;
              if(window.getSelection){//w3c
                window.getSelection().removeAllRanges();
              }else  if(document.selection){
                document.selection.empty();//IE
              }
              var y = e.clientY;
              var down = y > dragManager.y;// 
              var tr = document.elementFromPoint(e.clientX,e.clientY);
              if(tr && tr.nodeName == "TD"){
                tr = tr.parentNode
                dragManager.y = y;
                if( handler !== tr){
                  tr.parentNode.insertBefore(handler, (down ? tr.nextSibling : tr));
                }
              };
            }
          },
          dragStart:function(e){
            e = e || event;
            var handler = e.target || e.srcElement;
            if(handler.nodeName === "TD"){
              handler = handler.parentNode;
              dragManager.handler = handler;
              if(!handler.getAttribute("data-background")){
                handler.setAttribute("data-background",getStyle(handler,"background-color"))
              }
              // 
              handler.style.backgroundColor = "#ccc";
              handler.style.cursor = "move";
              dragManager.y = e.clientY;
            }
          },
          dragEnd:function(){
            var handler = dragManager.handler
            if (handler) {
              handler.style.backgroundColor = handler.getAttribute("data-background");
              handler.style.cursor = "default";
              dragManager.handler = null;
            }
          },
          main:function(el){
            addEvent(el,"mousedown",dragManager.dragStart);
            addEvent(document,"mousemove",dragManager.draging);
            addEvent(document,"mouseup",dragManager.dragEnd);

          }
        }
        var el = document.getElementById("table");
        dragManager.main(el);
      }

window.onload = function(){
//바인딩 이벤트
var addEvent = document.addEventListener ? function(el,type,callback){
el.addEventListener( type, callback, !1 );
} : function(el,type,callback){
el.attachEvent( "on"+ type, callback );
}
//정확한 스타일 가져오기
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 = {
y:0,
draging:function(e) {//mousemove 시 줄 드래그
var handler = dragManager.handler;
if(handler){
e = e || event;
if(window.getSelection){//w3c
window.getSelection().removeAllRanges();
}else if(document.selection){
document.selection.empty();//IE
}
var y = e.clientY;
var down = y > dragManager.y;//아래로 이동 여부
var tr = document.elementFromPoint(e.clientX,e.clientY);
if(tr && tr.nodeName == "TD"){
tr = tr.parentNode
dragManager.y = y;
if( handler !== tr){
tr.parentNode.insertBefore(handler, (down ? tr.nextSibling : tr));
}
};
}
},
dragStart:function(e){
e = e || event;
var handler = e.target || e.srcElement;
if(handler.nodeName === "TD"){
handler = handler.parentNode;
dragManager.handler = handler;
if(!handler.getAttribute("data-background")){
handler.setAttribute("data-background",getStyle(handler,"background-color"))
}
//이동식 상태로 표시
handler.style.backgroundColor = "#ccc";
handler.style.cursor = "move";
dragManager.y = e.clientY;
}
},
dragEnd:function(){
var handler = dragManager.handler
if (handler) {
handler.style.backgroundColor = handler.getAttribute("data-background");
handler.style.cursor = "default";
dragManager.handler = null;
}
},
main:function(el){
addEvent(el,"mousedown",dragManager.dragStart);
addEvent(document,"mousemove",dragManager.draging);
addEvent(document,"mouseup",dragManager.dragEnd);
}
}
var el = document.getElementById("table");
dragManager.main(el);
}

행 드래그by사도정미

1	One	dom.require
2	Two	ControlJS
3	Three	HeadJS
4	Four	LAB.js
5	Five	$script.js
6	Six	NBL.js

실행 코드