Javascript _ javascript tips

This article mainly introduces how to implement row dragging in javascript, involving javascript mouse events and operations related to page elements, for more information about how to implement row-dragging in javascript, see the example in this article. Share it with you for your reference. The details are as follows:

 Row draggingScript 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);} // determines whether the style supports var getStyleName = (function () {var prefixes = ['', '-ms -', '-moz-', '-webkit-', '-khtml-', '-o-']; var reg_cap =/-([a-z])/g; function getStyleName (css, el) {el = el | document.doc umentElement; var style = el. style, test; for (var I = 0, l = prefixes. length; I <l; I ++) {test = (prefixes [I] + css ). replace (reg_ca P, function ($0, $1) {return $1. toUpperCase () ;}); if (test in style) {return test ;}} return null;} return getStyleName ;})(); var userSelect = getStyleName ("user-select"); // 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 = {y: 0, dragStart: function (e) {e = e | event; var handler = e.tar get | 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; if (typeof userSelect = "string") {return document.doc umentElement. style [userSelect] = "none";} document. unselectable = "on"; document. onselectstart = function () {retur N false ;}}, draging: function (e) {// drag the row var handler = dragManager during mousemove. handler; if (handler) {e = e | event; var y = e. clientY; var down = y> dragManager. y; // whether to move 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) ;}}}, dragEnd: function () {var handler = dragManager. handler if (handler) {handler. style. backgroundColor = handler. getAttribute ("data-background"); handler. style. cursor = "default"; dragManager. handler = null;} if (typeof userSelect = "string") {return document.doc umentElement. 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);} scriptRow dragging
 

  

   

    
1
    
One
    
Dom. require
   
   

    
2
    
Two
    
ControlJS
   
   

    
3
    
Three
    
HeadJS
   
   

    
4
    
Four
    
LAB. js
   
   

    
5
    
Five
    
$ Script. js
   
   

    
6
    
Six
    
NBL. js
   
  
 

I hope this article will help you design javascript programs.