Home > Developer > JavaScript
This article illustrates the way that JavaScript implements row dragging. Share to everyone for your reference. Specifically as follows:
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5, 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 11 9 120 121 122 123 124 | <!doctype html> <html> <head> <meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/> <title> line drag </title> <script> window.onload = function () {//bind event var addevent = Docu Ment.addeventlistener? function (el,type,callback) {El.addeventlistener (type, callback,! 1);}: Function (el,type,callback) {el.attachevent (" On "+ type, callback); //Determine support for style Var getstylename= (function () {var prefixes = [', '-ms-', '-moz-', '-webkit-', '-khtml-', '-o-']; var reg_cap =/-([A-z])/g; function Getstylename (CSS, el) {el = el | | document.documentelement var style = El.style,test for (Var i=0, l=prefixes. Length I < L; i++) {test = (Prefixes[i] + CSS). Replace (Reg_cap,function ($0,$1) {return $1.touppercase ();}); if (test in style) {return Test } return null; return getstylename; })(); var userselect = getstylename ("User-select"); Exact get 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 ($, $) {return $1.to Uppercase (); }); return El.currentstyle[style]; var Dragmanager = {y:0, dragstart:function (e) {e = e | | | event; var handler = E.target | | e.srcelement; if (Handler.noden Ame = = "TD") {handler = Handler.parentnode; dragmanager.handler = handler; if (!handler.getattribute ("Data-background") {Handler.setattribute ("Data-background", GetStyle (Handler, "Background-color")}//Show as removable state Handler.style.backgroundColor = "#ccc"; Handler.style.cursor = "Move"; Dragmanager.y = E.clienty; if (typeof Userselect = = "string") {return document.documentelement.style[userselect] = "None";} document.unselectable = "on"; Document.onselectstart = function () {return false;}} Draging:function (e) {//mousemove) Drag the row var handler = Dragmanager.handler; if (handler) {e = e | | event; var y = e.clienty; var down = y > dragmanager.y;//moves the var tr = document.elementfrompoint (E.clientx,e.clienTY); if (tr && tr.nodename = "TD") {tr = Tr.parentnode dragmanager.y = y; if (handler!== tr) {TR.PARENTNODE.INSERTBEFO Re (handler, (down) tr.nextSibling:tr); } }; }, Dragend:function () {var handler = Dragmanager.handler if (handler) {Handler.style.backgroundColor = Handler.getattri Bute ("Data-background"); Handler.style.cursor = "Default"; Dragmanager.handler = null; } if (typeof Userselect = = "string") {return document.documentelement.style[userselect] = "text";} document.unselectable = "Off"; Document.onselectstart = 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 </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> |
The
wants this article to help you with your JavaScript programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
