java drag_[Java教程]一步一步理解拖拽Drag（四）

[Java教程]一步一步理解拖拽Drag(四)

0 2012-01-09 11:00:47

拖拽三部曲：

1、可以指定标题栏作为移动区域，默认整个移动物体都可以拖动

2、可以设置移动范围，当前移动物体相对于某个区域内范围内移动,默认整个页面内拖动

View Code 1

2

4

一步一步理解拖拽Drag(四)

5

6 *{margin: 0px;padding: 0px;}

7 .moving{opacity: 0.6;filter: alpha(opacity=60);}

8 .maindiv{width: 960px;border: 1px solid red;position: relative;margin: 0 auto;}

9 .bigdiv{width: 960px;position: relative;height: 1000px;overflow: hidden;}

10 #mmdiv{width: 300px;height: 100px;left: 0px;top: 0px;position: absolute;border: 1px solid red;overflow: hidden;}

11 #mmdiv h3{width: 100%;height: 30px;line-height: 30px;background: #6666FF;cursor: move;}

12 #mmdiv h3 span{margin-left: 20px;}

13

14

15 var base = {

16 getId: function (id) {

17 return document.getElementById(id);

18 },

19 addEvent: function (element, type, fn) {

20 if (element.addEventListener) {

21 element.addEventListener(type, fn, false);

22 }

23 else if (element.attachEvent) {

24 element.attachEvent("on" + type, fn);

25 }

26 else {

27 element["on" + type] = fn;

28 }

29 },

30 removeEvent: function (element, type, fn) {

31 if (element.removeEventListener) {

32 element.removeEventListener(type, fn, false);

33 }

34 else if (element.detachEvent) {

35 element.detachEvent("on" + type, fn);

36 }

37 else {

38 element["on" + type] = null;

39 }

40 },

41 unDefaultEvent: function (event) {

42 if (event && event.preventDefault) {

43 event.preventDefault();

44 }

45 else {

46 event.returnValue = false;

47 }

48 },

49 page: function (event) {

50 return { x: event.pageX || event.clientX + document.documentElement.scrollLeft, y: event.pageY || event.clientY + document.documentElement.scrollTop };

51 }

52 };

53

54 (function () {

55

56 function Drag(obj, handle, bigcont, moveCss, moveX, moveY) {

57 this.obj = obj;

58 this.handle = handle || obj;

59 this.bigcont = bigcont || document.documentElement;

60 this.moveCss = moveCss;

61 this.moveX = moveX || false;

62 this.moveY = moveY || false;

63 this.disX = this.disY = 0;

64 var _this = this;

65 base.addEvent(this.handle, "mousedown", function (event) {

66 _this.startDrag(event);

67 });

68 }

69

70 Drag.prototype = {

71 startDrag: function (event) {

72 base.unDefaultEvent(event);

73 var _this = this;

74 this.disX = base.page(event).x - this.obj.offsetLeft;

75 this.disY = base.page(event).y - this.obj.offsetTop;

76 this.mousemoveHandle = function (event) {

77 _this.move(event);

78 };

79

80 this.mouseupHandle = function () {

81 _this.stopDrag();

82 };

83

84 base.addEvent(document, "mousemove", this.mousemoveHandle);

85

86 base.addEvent(document, "mouseup", this.mouseupHandle);

87

88 if (document.selection && document.selection.empty) {

89 document.selection.empty();

90 }

91 else if (window.getSelection) {

92 window.getSelection().removeAllRanges();

93 }

94

95 if (this.obj.setCapture) {

96 this.obj.setCapture(true);

97 }

98

99 },

100 move: function (event) {

101 base.unDefaultEvent(event);

102 this.obj.className = this.moveCss;

103

104 var x = base.page(event).x - this.disX;

105 var y = base.page(event).y - this.disY;

106

107 var range = {

108 minX: this.bigcont.scrollLeft,

109 minY: this.bigcont.scrollTop,

110 maxX: this.bigcont.scrollWidth - this.obj.offsetWidth,

111 maxY: this.bigcont.scrollHeight - this.obj.offsetHeight

112 };

113

114 x = Math.max(x, range.minX);

115 x = Math.min(x, range.maxX);

116 y = Math.max(y, range.minY);

117 y = Math.min(y, range.maxY);

118

119 if (true == this.moveX && true == this.moveY) {

120 }

121 else if (true == this.moveX) {

122 this.obj.style.left = x + "px";

123 }

124 else if (true == this.moveY) {

125

126 this.obj.style.top = y + "px";

127 }

128 else {

129 this.obj.style.left = x + "px";

130 this.obj.style.top = y + "px";

131 }

132 },

133 stopDrag: function () {

134 this.obj.className = "";

135 base.removeEvent(document, "mousemove", this.mousemoveHandle);

136 base.removeEvent(document, "mouseup", this.mouseupHandle);

137 if (this.obj.releaseCapture) {

138 this.obj.releaseCapture(true);

139 }

140 }

141 };

142

143 base.addEvent(window, "load", function (event) {

144 var odiv = base.getId("mmdiv");

145 var obj = odiv.getElementsByTagName("h3")[0];

146 var bigdiv = base.getId("bigdiv");

147 var btn = document.getElementsByTagName("input");

148 new Drag(odiv, obj, bigdiv, "moving");

149 });

150 })();

151

152

153

154

155

156 默认整个页面内有问题，需要待完善

157

158

159

160

161 标题

162

163

164

165

166

167