Drag and Drop trilogy:
1. You can specify the title bar as the moving area. By default, the entire moving object can be dragged.
2. You can set the moving range. The current moving object moves within a certain area. By default, the entire page is dragged.
1 <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <HTML xmlns = "http://www.w3.org/1999/xhtml">
3 4 <title> step by step understanding drag and drop drag (4) </title>
5 <style type = "text/CSS">
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 </style>
14 <SCRIPT type = "text/JavaScript">
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.doc umentelement. scrollleft, Y: event. Pagey | event. clienty + document.doc umentelement. 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.doc umentelement;
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 </SCRIPT>
152 153 <body>
154 <Div class = "maindiv">
155 <div>
156 by default, the entire page has problems and needs to be improved.
157 </div>
158 <Div id = "bigdiv" class = "bigdiv">
159 <Div id = "mmdiv">
160 161 <span> title </span>
162 163 </div>
164 </div>
165 </div>
166 </body>
167
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
