//Original link:
//http://www.cnblogs.com/rubylouvre/archive/2011/04/16/2018148.html
by Situ Zhengmei
display effect The realization idea of
line dragging is very simple , select a row, drag it up to swap positions with the row above, and drag it down to swap positions with the row below. The question is how to get the swap line. I have seen a very detailed tutorial, it will calculate the height and Y coordinate of each row in the table, in other words, it will always compare whether e.pageX is within the [rowTop, rowBottom] interval. But this also brings up the second problem, how many rows there are multiple such intervals. So the solution becomes to take the event source object, and then take its parent object upward. If its parent object is a TR element, take its [rowTop, rowBottom] interval.... The idea is very direct, and it also objectively makes a Restriction - Can't use proxy drag. Let's not talk about dragging the agent or dragging the real object, the amount of calculation to be done in the process of moving the mouse is very large, but fortunately it is still within the tolerance range of IE. Is there a better way?
The reason why people are preconceived is because he holds so many keys. If he has a lot of keys in his hand, he will stop a little when opening the door and choose carefully. Therefore, the more familiar and mastered the native API, the better, so we can get better options. Another way of thinking is to save the current row and its style and coordinates when dragging (mousedown), and get the element at the position of the mouse while dragging. This element uses a clever API to get document.elementFromPoint(x,y) . Usually, what we get is a TD, of course if you put a DIV in it, it's a DIV Luo. Then we get its TR element, and then compare whether the TR element saved during mousedown is the same element, not the same element, and then we do further operations. At this time, we have to judge it to move up and down, which is just a simple subtraction. Then swap the two lines and use insertBefore. Finally when mouseup, restore the style of the row is! Since there are no complicated coordinate calculations, the whole program is surprisingly efficient!
//http://www.cnblogs.com/rubylouvre/archive/2011/04/16/2018148.html by Situ Masami
window.onload = function(){
// bind event
var addEvent = document.addEventListener ? function(el,type,callback){
el.addEventListener( type, callback, !1 );
} : function(el,type,callback){
el.attachEvent( "on" + type, callback );
}
// Get the exact style
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 when dragging the row
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;//Whether to move down
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"))
}
//display as movable
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);
}
Practical application of chapterList.jsp
<!doctype html>
<html>
<head>
<title>Line drag by Situ Zhengmei</title>
<script>
window.onload = function(){
// bind event
var addEvent = document.addEventListener ? function(el,type,callback){
el.addEventListener( type, callback, !1 );
} : function(el,type,callback){
el.attachEvent( "on" + type, callback );
}
// Get the exact style
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 when dragging the row
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;//Whether to move down
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"))
}
//display as movable
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);
}
</script>
<style>
.table{
width:60%;
border: 1px solid red;
border-collapse: collapse;
}
.table td{
border: 1px solid red;
height: 20px;
}
</style>
</head>
<body>
<h1>Line drag by Situ Zhengmei</h1>
<table id="table" class="table">
<tbody>
<tr>
<td>1</td>
<td>One</td>
<td>dom.require</td>
</tr>
<tr id="2" >
<td class="2">2</td>
<td>Two</td>
<td>ControlJS </td>
</tr>
<tr id="3" >
<td class="3">3</td>
<td>Three</td>
<td>HeadJS</td>
</tr>
<tr id="4" >
<td class="4">4</td>
<td>Four</td>
<td>LAB.js</td>
</tr>
<tr id="5" >
<td class="5">5</td>
<td>Five</td>
<td>$script.js</td>
</tr>
<tr id="6" >
<td class="6">6</td>
<td>Six</td>
<td>NBL.js</td>
</tr>
</tbody>
</table>
</body>
</html>