Principles of the drag and drop trilogy:
1. Press the mouse;
2. Move the mouse;
3. Move the mouse up.
View code
<! 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">
<Head>
<Title> drag step by step understanding drag </title>
<SCRIPT type = "text/JavaScript">
VaR base = {
GETID: function (ID ){
Return document. getelementbyid (ID );
},
Addevent: function (ELEM, type, FN ){
If (ELEM. addeventlistener ){
ELEM. addeventlistener (type, FN, false );
}
Else if (ELEM. attachevent ){
ELEM. attachevent ("On" + type, FN );
}
Else {
ELEM ["on" + type] = FN;
}
},
Removeevent: function (ELEM, type, FN ){
If (ELEM. removeeventlistener ){
ELEM. removeeventlistener (type, FN, false );
}
Else if (ELEM. detachevent ){
ELEM. detachevent ("On" + type, FN );
}
Else {
ELEM ["on" + type] = NULL;
}
}
};
Function drag (OBJ ){
This. OBJ = OBJ;
VaR _ this = this;
Base. addevent (OBJ, "mousedown", function (event ){
_ This. startdrap (event );
});
}
Drag. Prototype = {
Startdrap: function (event ){
VaR _ this = this;
This. mousemovehandle = function (event ){
_ This. Move ();
};
This. mouseuphandle = function (){
_ This. stopdrag ();
};
Base. addevent (document, "mousemove", this. mousemovehandle );
Base. addevent (document, "mouseup", this. mouseuphandle );
Base. GETID ("mdiv"). innerhtml = "The mouse is pressed ";
},
Move: function (){
Base. GETID ("mdiv"). innerhtml = "move the mouse .... ";
This. obj. style. Left = event. clientx-This. obj. offsetleft + "PX ";
This. obj. style. Top = event. clienty-This. obj. offsettop + "PX ";
},
Stopdrag: function (){
Base. removeevent (document, "mousemove", this. mousemovehandle );
Base. removeevent (document, "mouseup", this. mouseuphandle );
Base. GETID ("mdiv"). innerhtml = "move the mouse up ";
}
};
Base. addevent (window, "LOAD", function (){
VaR TMP = base. GETID ("mdiv ");
VaR B = new drag (TMP );
});
</SCRIPT>
</Head>
<Body>
<Div id = "mdiv" style = "width: 300px; Height: 100px; Border: 1px solid red; position: absolute">
</Div>
</Body>
</Html>