ホームページ > ウェブフロントエンド > jsチュートリアル > javascript_javascript スキルで行ドラッグを実装する方法

javascript_javascript スキルで行ドラッグを実装する方法

WBOY
リリース: 2016-05-16 15:57:37
オリジナル
1114 人が閲覧しました

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

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

43

44

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

84

85

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

119

120

121

122

123

124

<!doctype html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>行拖动</title>

<script>

 window.onload = function(){

 //绑定事件

 var addEvent = document.addEventListener &#63; function(el,type,callback){

  el.addEventListener( type, callback, !1 );

 } : function(el,type,callback){

  el.attachEvent( "on" + type, callback );

 }

 //判定对样式的支持

 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");

 //精确获取样式

 var getStyle = document.defaultView &#63; 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.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"))

  }

  //显示为可移动的状态

  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时拖动行

  var handler = dragManager.handler;

  if(handler){

  e = e || event;

  var y = e.clientY;

  var down = y > dragManager.y;//是否向下移动

  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 &#63; 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.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>行拖动</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>

ログイン後にコピー

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート