How to Use js to make rows in a table be dragged

The implementation of row dragging is very simple. Select a row, drag it up to exchange the position with the above row, and drag it down to switch the position with the following row. The question is how to get the exchange row. I have seen a very detailed tutorial. It calculates the height and Y coordinate of each row in the table. In other words, it compares e. whether pageX is within the range of [rowTop, rowBottom. But this also brings about the second problem. There are multiple rows with such intervals. The solution becomes to get the event source object, and then retrieve its parent object. If its parent object is a TR element, take its [rowTop, rowBottom] range .... the idea is very direct, while also objectively making a limit-you cannot use a proxy to drag. Not to mention whether to drag the agent or drag the object, it takes a lot of work to move the mouse. Fortunately, it is still within the scope of IE. Is there a better way?

The reason why a person takes precedence is that he holds these keys. If he had a lot of keys on his hand, he would stop a little while opening the door and choose carefully. Therefore, the more native APIs we get familiar with, the better, and the better options we get. For another idea, when dragging (mousedown), save the current row and Its Style and coordinates, and drag to get the elements at the place where the mouse is located. This element uses a clever API to get the document. elementFromPoint (x, y ). In general, what we get is TD. Of course, if you put a DIV in it, it is DIV. Then we get its TR element, and compare whether the TR element saved during mousedown is the same element, not the same element before further operations. In this case, we need to determine that it is moving up and down, simple subtraction. The next step is to exchange two rows and use insertBefore. At last, when mouseup is enabled, the restore row style is! Because there is no complex coordinate calculation, the entire program is surprisingly efficient!

<! Doctype html> <pead> <title> drag a table row </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) ;}// remove event var removeEvent = document. removeEventListener? Function (el, type, callback) {el. removeEventListener (type, callback);}: function (el, type, callback) {el. detachEvent ("on" + type, callback);} // obtain the style var getStyle = document accurately. 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 = {clientY: 0, draging: function (e) {// drag the row var dragObj = dragManager when mousemove. dragObj; if (dragObj) {e = e | event; if (window. getSelection) {// w3c wind Ow. getSelection (). removeAllRanges ();} else if (document. selection) {document. selection. empty (); // IE} var y = e. clientY; var down = y> dragManager. clientY; // whether to move var tr = document. elementFromPoint (e. clientX, e. clientY); if (tr & tr. nodeName = "TD") {tr = tr. parentNode dragManager. clientY = y; if (dragObj! = Tr) {tr. parentNode. insertBefore (dragObj, (down? Tr. nextSibling: tr) ;}}}, dragStart: function (e) {e = e | event; var target = e.tar get | 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)} // displayed as a movable target. style. backgroundColor = "# ccc"; target. style. cursor = "move"; dragManager. clientY = e. clientY; addEvent (document, "mousemove", dragManager. draging); addEvent (document, "mouseup", dragManager. dragEnd) ;}, dragEnd: function (e) {var dragObj = dragManager. dragObj if (dragObj) {e = e | event; var target = e.tar get | e. srcElement; if (target. nodeName = "TD") {target = target. parentNode; dragObj. style. backgroundColor = dragObj. getAttribute ("data-background"); dragObj. style. cursor = "default"; dragManager. dragObj = null; removeEvent (document, "mousemove", dragManager. draging); removeEvent (document, "mouseup", dragManager. dragEnd) ;}}, main: function (el) {addEvent (el, "mousedown", dragManager. dragStart) ;}} 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> </pead> <body> <p> drag a table row </p> <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> </ptml>

Run code

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) ;}// remove event var removeEvent = document. removeEventListener? Function (el, type, callback) {el. removeEventListener (type, callback);}: function (el, type, callback) {el. detachEvent ("on" + type, callback);} // obtain the style var getStyle = document accurately. 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 = {clientY: 0, draging: function (e) {// drag the row var dragObj = dragManager when mousemove. dragObj; if (dragObj) {e = e | event; // clear the selection if (window. getSelection) {// w3 C window. getSelection (). removeAllRanges ();} else if (document. selection) {document. selection. empty (); // IE} var y = e. clientY; var down = y> dragManager. clientY; // whether to move var tr = document. elementFromPoint (e. clientX, e. clientY); if (tr & tr. nodeName = "TD") {tr = tr. parentNode dragManager. clientY = y; if (dragObj! = Tr) {tr. parentNode. insertBefore (dragObj, (down? Tr. nextSibling: tr) ;}}}, dragStart: function (e) {e = e | event; var target = e.tar get | 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)} // displayed as a movable target. style. backgroundColor = "# ccc"; target. style. cursor = "move"; dragManager. clientY = e. clientY; addEvent (document, "mousemove", dragManager. draging); addEvent (document, "mouseup", dragManager. dragEnd) ;}, dragEnd: function (e) {var dragObj = dragManager. dragObj if (dragObj) {e = e | event; var target = e.tar get | e. srcElement; if (target. nodeName = "TD") {target = target. parentNode; dragObj. style. backgroundColor = dragObj. getAttribute ("data-background"); dragObj. style. cursor = "default"; dragManager. dragObj = null; removeEvent (document, "mousemove", dragManager. draging); removeEvent (document, "mouseup", dragManager. dragEnd) ;}}, main: function (el) {addEvent (el, "mousedown", dragManager. dragStart) ;}} var el = document. getElementById ("table"); dragManager. main (el );}