Note:
Drag Process
Mouse-> (move the mouse-> move the element)
Move the mouse and press the button to start.
For IE, we mainly use obj. attachevent () & obj. detachevent ()
For Firefox, obj. addeventlistener () & obj. removeeventlistener of Dom 2 is mainly used.
Both methods are supported by opera.
In this article, the style attribute must be set to position: absolute;
Specify the coordinate values of left & Top, such:
Linenum
<Div style = "border: 1px dashed blue; width: 180px; text-align: center; position: absolute; left: 100px; top: 150px; "onmousedown =" fdragging (this, event, true); ">
Element 1 <br/>
Dragging compatibility for IE, opera, Firefox.
</Div>
Description of parameters of the fdragging (OBJ, E, limit) function:
OBJ: HTML element object, the element to be dragged
E: Specifies the event object, which is compatible with Firefox.
Limit: A boolean value that specifies whether to drag a parent element only. False can be moved to any position.
The fdragging (OBJ, E, limit) function should be used under the HTML onmousedown attribute, for example:
Linenum
<Div style = "border: 1px dashed blue; width: 180px; text-align: center; position: absolute; left: 50px; top: 50px; "onmousedown =" fdragging (this, event, true); ">
Element <br/>
Dragging compatibility for IE, opera, Firefox.
</Div>
Shawl. Qiu
2006-11-10
Http://blog.csdn.net/btbtd
Function: fdragging (OBJ, E, limit) and usage demonstration
Linenum
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<! -- Dw6 -->
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> shawl. Qiu template </title>
<SCRIPT type = "text/JavaScript">
// <! [CDATA [
Function fdragging (OBJ, E, limit ){
If (! E) E = Window. event;
VaR x = parseint (obj. style. Left );
Var y = parseint (obj. style. Top );
VaR X _ = E. clientx-X;
Var y _ = E. clienty-y;
If (document. addeventlistener ){
Document. addeventlistener ('mousemove ', infmove, true );
Document. addeventlistener ('mouseup', infup, true );
} Else if (document. attachevent ){
Document. attachevent ('onmousemove ', infmove );
Document. attachevent ('onmouseup', infup );
}
Infstop (E );
Infabort (E)
Function infmove (e ){
VaR EVT;
If (! E) E = Window. event;
If (Limit ){
VaR op = obj. parentnode;
VaR opx = parseint (op. style. Left );
VaR opy = parseint (op. style. Top );
If (E. clientx-X _) <0) return false;
Else if (E. clientx-X _ + obj. offsetwidth + opx)> (opx + OP. offsetwidth) return false;
If (E. clienty-Y _ <0) return false;
Else if (E. clienty-Y _ + obj. offsetheight + opy)> (opy + OP. offsetheight) return false;
// Status = E. clienty-Y _;
}
OBJ. style. Left = E. clientx-X _ + 'px ';
OBJ. style. Top = E. clienty-Y _ + 'px ';
Infstop (E );
} // Shawl. Qiu script
Function infup (e ){
VaR EVT;
If (! E) E = Window. event;
If (document. removeeventlistener ){
Document. removeeventlistener ('mousemove ', infmove, true );
Document. removeeventlistener ('mouseup', infup, true );
} Else if (document. detachevent ){
Document. detachevent ('onmousemove ', infmove );
Document. detachevent ('onmouseup', infup );
}
Infstop (E );
} // Shawl. Qiu script
Function infstop (e ){
If (E. stoppropagation) Return e. stoppropagation ();
Else return E. cancelbubble = true;
} // Shawl. Qiu script
Function infabort (e ){
If (E. preventdefault) Return e. preventdefault ();
Else return E. returnvalue = false;
} // Shawl. Qiu script
}
//]>
</SCRIPT>
</Head>
<Body>
<Div style = "border: 1px dashed blue; width: 760px; Height: 600px; text-align: center; position: absolute; left: 100px; top: 10px; "> This parent
<Div style = "border: 1px dashed blue; width: 180px; text-align: center; position: absolute; left: 50px; top: 50px; "onmousedown =" fdragging (this, event, true); ">
Element <br/>
Dragging compatibility for IE, opera, Firefox.
</Div>
<Div style = "border: 1px dashed blue; width: 180px; text-align: center; position: absolute; left: 100px; top: 150px; "onmousedown =" fdragging (this, event, true); ">
Element 1 <br/>
Dragging compatibility for IE, opera, Firefox.
</Div>
<Div style = "border: 1px dashed blue; width: 180px; text-align: center; position: absolute; left: 200px; top: 250px; "onmousedown =" fdragging (this, event, false); ">
Element 2 <br/>
Dragging compatibility for IE, opera, Firefox. <br/>
<Font color = "red"> dragging everywhere </font>
</Div>
</Div>
</Body>
</Html>