javascript实现行拖动的方法

这篇文章主要介绍了javascript实现行拖动的方法,涉及javascript鼠标事件及页面元素的相关操作技巧,需要的朋友可以参考下

本文实例讲述了javascript实现行拖动的方法。分享给大家供大家参考。具体如下：

1. <!doctype html> 
2. <html> 
3. <head> 
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
5. <title>行拖动</title> 
6. <script> 
7. window.onload = function(){ 
8. //绑定事件 
9. var addEvent = document.addEventListener ? function(el,type,callback){ 
10. el.addEventListener( type, callback, !1 ); 
11. } : function(el,type,callback){ 
12. el.attachEvent( "on" + type, callback ); 
13. } 
14. //判定对样式的支持 
15. var getStyleName= (function(){ 
16. var prefixes = ['', '-ms-','-moz-', '-webkit-', '-khtml-', '-o-']; 
17. var reg_cap = /-([a-z])/g; 
18. function getStyleName(css, el) { 
19. el = el || document.documentElement; 
20. var style = el.style,test; 
21. for (var i=0, l=prefixes.length; i < l; i++) { 
22. test = (prefixes[i] + css).replace(reg_cap,function($0,$1){ 
23. return $1.toUpperCase(); 
24. }); 
25. if(test in style){ 
26. return test; 
27. } 
28. } 
29. return null; 
30. } 
31. return getStyleName; 
32. })(); 
33. var userSelect = getStyleName("user-select"); 
34. //精确获取样式 
35. var getStyle = document.defaultView ? function(el,style){ 
36. return document.defaultView.getComputedStyle(el, null).getPropertyValue(style) 
37. } : function(el,style){ 
38. style = style.replace(//-(/w)/g, function($, $1){ 
39. return $1.toUpperCase(); 
40. }); 
41. return el.currentStyle[style]; 
42. } 
43. var dragManager = { 
44. y:0, 
45. dragStart:function(e){ 
46. e = e || event; 
47. var handler = e.target || e.srcElement; 
48. if(handler.nodeName === "TD"){ 
49. handler = handler.parentNode; 
50. dragManager.handler = handler; 
51. if(!handler.getAttribute("data-background")){ 
52. handler.setAttribute("data-background",getStyle(handler,"background-color")) 
53. } 
54. //显示为可移动的状态 
55. handler.style.backgroundColor = "#ccc"; 
56. handler.style.cursor = "move"; 
57. dragManager.y = e.clientY; 
58. if(typeof userSelect === "string"){ 
59. return document.documentElement.style[userSelect] = "none"; 
60. } 
61. document.unselectable = "on"; 
62. document.onselectstart = function(){ 
63. return false; 
64. } 
65. } 
66. }, 
67. draging:function(e){//mousemove时拖动行 
68. var handler = dragManager.handler; 
69. if(handler){ 
70. e = e || event; 
71. var y = e.clientY; 
72. var down = y > dragManager.y;//是否向下移动 
73. var tr = document.elementFromPoint(e.clientX,e.clientY); 
74. if(tr && tr.nodeName == "TD"){ 
75. tr = tr.parentNode 
76. dragManager.y = y; 
77. if( handler !== tr){ 
78. tr.parentNode.insertBefore(handler, (down ? tr.nextSibling : tr)); 
79. } 
80. }; 
81. } 
82. }, 
83. dragEnd:function(){ 
84. var handler = dragManager.handler 
85. if (handler) { 
86. handler.style.backgroundColor = handler.getAttribute("data-background"); 
87. handler.style.cursor = "default"; 
88. dragManager.handler = null; 
89. } 
90. if(typeof userSelect === "string"){ 
91. return document.documentElement.style[userSelect] = "text"; 
92. } 
93. document.unselectable = "off"; 
94. document.onselectstart = null; 
95. }, 
96. main:function(el){ 
97. addEvent(el,"mousedown",dragManager.dragStart); 
98. addEvent(document,"mousemove",dragManager.draging); 
99. addEvent(document,"mouseup",dragManager.dragEnd); 
100. } 
101. } 
102. var el = document.getElementById("table"); 
103. dragManager.main(el); 
104. } 
105. </script> 
106. <style> 
107. .table{width:60%;border: 1px solid red;border-collapse: collapse;} 
108. .table td{border: 1px solid red;height: 20px;} 
109. </style> 
110. </head> 
111. <body> 
112. <h1>行拖动</h1> 
113. <table id="table" class="table"> 
114. <tbody> 
115. <tr><td>1</td><td>One</td><td>dom.require</td></tr> 
116. <tr id="2" ><td class="2">2</td><td>Two</td><td>ControlJS </td></tr> 
117. <tr id="3" ><td class="3">3</td><td>Three</td><td>HeadJS</td></tr> 
118. <tr id="4" ><td class="4">4</td><td>Four</td><td>LAB.js</td></tr> 
119. <tr id="5" ><td class="5">5</td><td>Five</td><td>$script.js</td></tr> 
120. <tr id="6" ><td class="6">6</td><td>Six</td><td>NBL.js</td></tr> 
121. </tbody> 
122. </table> 
123. </body> 
124. </html> 

希望本文所述对大家的javascript程序设计有所帮助。