Home > Developer > JavaScript
<! 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>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> drag-and-drop effect </title>
</Head>
<Body>
<SCRIPT>
VaR isie = (document. All )? True: false;
VaR $ = function (ID ){
Return "string" = typeof ID? Document. getelementbyid (ID): ID;
};
VaR class = {
Create: function (){
Return function () {This. Initialize. Apply (this, arguments );}
}
}
VaR extend = function (destination, source ){
For (VAR property in source ){
Destination [property] = source [property];
}
}
VaR bind = function (object, fun ){
Return function (){
Return fun. Apply (object, arguments );
}
}
VaR bindaseventlistener = function (object, fun ){
Return function (event ){
Return fun. Call (object, (event | window. Event ));
}
}
VaR currentstyle = function (element ){
Return element. currentstyle | document. defaultview. getcomputedstyle (element, null );
}
Function addeventhandler (otarget, seventtype, fnhandler ){
If (otarget. addeventlistener ){
Otarget. addeventlistener (seventtype, fnhandler, false );
} Else if (otarget. attachevent ){
Otarget. attachevent ("On" + seventtype, fnhandler );
} Else {
Otarget ["on" + seventtype] = fnhandler;
}
};
Function removeeventhandler (otarget, seventtype, fnhandler ){
If (otarget. removeeventlistener ){
Otarget. removeeventlistener (seventtype, fnhandler, false );
} Else if (otarget. detachevent ){
Otarget. detachevent ("On" + seventtype, fnhandler );
} Else {
Otarget ["on" + seventtype] = NULL;
}
};
// Drag-and-drop Program
VaR drag = Class. Create ();
Drag. Prototype = {
// Drag and drop objects
Initialize: function (drag, options ){
This. Drag = $ (drag); // drag and drop an object
This. _ x = This. _ y = 0; // record the position of the cursor relative to the drag-and-drop object
This. _ marginleft = This. _ margintop = 0; // record margin
// Event object (used to bind a removal event)
This. _ fm = bindaseventlistener (this, this. Move );
This. _ FS = BIND (this, this. Stop );
This. setoptions (options );
This. Limit = !! This. Options. limit;
This. mxleft = parseint (this. Options. mxleft );
This. mxright = parseint (this. Options. mxright );
This. mxtop = parseint (this. Options. mxtop );
This. mxbottom = parseint (this. Options. mxbottom );
This. lockx = !! This. Options. lockx;
This. locky = !! This. Options. locky;
This. Lock = !! This. Options. lock;
This. onstart = This. Options. onstart;
This. onmove = This. Options. onmove;
This. onstop = This. Options. onstop;
This. _ HANDLE = $ (this. Options. Handle) | this. Drag;
This. _ mxcontainer = $ (this. Options. mxcontainer) | NULL;
This. Drag. style. Position = "absolute ";
// Transparent
If (isie &&!! This. Options. Transparent ){
// Fill in the drag-and-drop object
With (this. _ HANDLE. appendchild (document. createelement ("Div"). Style ){
Width = height = "100%"; backgroundcolor = "# fff"; filter = "alpha (opacity: 0 )";
}
}
// Scope of correction
This. Repair ();
Addeventhandler (this. _ HANDLE, "mousedown", bindaseventlistener (this, this. Start ));
},
// Set the default attribute
Setoptions: function (options ){
This. Options = {// Default Value
Handle: "", // set the trigger object (if not set, use the drag-and-drop object)
Limit: false, // whether to set the range limit (if it is true, the following parameter is useful, which can be a negative number)
Mxleft: 0, // left Restriction
Mxright: 9999, // right restriction
Mxtop: 0, // Upper Limit
Mxbottom: 9999, // lower limit
Mxcontainer: "", // specify the limit in the container
Lockx: false, // whether to Lock Horizontal drag and drop
Locky: false, // whether to lock the vertical drag and drop
Lock: false, // whether to lock
Transparent: false, // whether transparent
Onstart: function () {}, // executed when moving started
Onmove: function () {}, // executed when moving
Onstop: function () {}// executed when the move ends
};
Extend (this. Options, options || {});
},
// Prepare to drag
Start: function (oevent ){
If (this. Lock) {return ;}
This. Repair ();
// Record the position of the relative drag-and-drop object
This. _ x = oevent. clientx-This. Drag. offsetleft;
This. _ y = oevent. clienty-This. Drag. offsettop;
// Record margin
This. _ marginleft = parseint (currentstyle (this. Drag). marginleft) | 0;
This. _ margintop = parseint (currentstyle (this. Drag). margintop) | 0;
// Stop when mousemove
Addeventhandler (document, "mousemove", this. _ FM );
Addeventhandler (document, "mouseup", this. _ fS );
If (isie ){
// Lost focus
Addeventhandler (this. _ HANDLE, "losecapture", this. _ fS );
// Set Mouse capture
This. _ HANDLE. setcapture ();
} Else {
// Lost focus
Addeventhandler (window, "Blur", this. _ fS );
// Block the default action
Oevent. preventdefault ();
};
// Additional program
This. onstart ();
},
// Scope of correction
Repair: function (){
If (this. Limit ){
// Modify the error range parameter
This. mxright = math. Max (this. mxright, this. mxleft + this. Drag. offsetwidth );
This. mxbottom = math. Max (this. mxbottom, this. mxtop + this. Drag. offsetheight );
// If there is a container, you must set position to relative for relative positioning and set it before obtaining the offset.
! This. _ mxcontainer | currentstyle (this. _ mxcontainer). Position = "relative" | (this. _ mxcontainer. style. Position = "relative ");
}
},
// Drag
Move: function (oevent ){
// Determine whether the lock is enabled
If (this. Lock) {This. Stop (); return ;};
// Clear the selection
Window. getselection? Window. getselection (). removeallranges (): Document. selection. Empty ();
// Set the moving parameters
VaR ileft = oevent. clientx-This. _ x, iTOP = oevent. clienty-This. _ y;
// Set the range limit
If (this. Limit ){
// Set the range parameter
VaR mxleft = This. mxleft, mxright = This. mxright, mxtop = This. mxtop, mxbottom = This. mxbottom;
// If the container is set, modify the range parameter.
If (!! This. _ mxcontainer ){
Mxleft = math. Max (mxleft, 0 );
Mxtop = math. Max (mxtop, 0 );
Mxright = math. Min (mxright, this. _ mxcontainer. clientwidth );
Mxbottom = math. Min (mxbottom, this. _ mxcontainer. clientheight );
};
// Modify the moving parameters
Ileft = math. Max (math. Min (ileft, mxright-This. Drag. offsetwidth), mxleft );
ITOP = math. Max (math. Min (iTOP, mxbottom-This. Drag. offsetheight), mxtop );
}
// Set the location and modify the margin
If (! This. lockx) {This. Drag. style. Left = ileft-This. _ marginleft + "PX ";}
If (! This. locky) {This. Drag. style. Top = iTOP-This. _ margintop + "PX ";}
// Additional program
This. onmove ();
},
// Stop dragging
Stop: function (){
// Remove the event
Removeeventhandler (document, "mousemove", this. _ FM );
Removeeventhandler (document, "mouseup", this. _ fS );
If (isie ){
Removeeventhandler (this. _ HANDLE, "losecapture", this. _ fS );
This. _ HANDLE. releasecapture ();
} Else {
Removeeventhandler (window, "Blur", this. _ fS );
};
// Additional program
This. onstop ();
}
};
</SCRIPT>
<Style>
# Idcontainer {border: 10px solid #990000; width: 600px; Height: 300px ;}
# Iddrag {border: 5px solid # c4e3fd; Background: # c4e3fd; width: 50px; Height: 50px; top: 50px; left: 50px ;}
# Idhandle {cursor: move; Height: 25px; Background: # 0000ff; overflow: hidden ;}
</Style>
<Div id = "idcontainer">
<Div id = "iddrag"> <Div id = "idhandle"> qwe </div>
<Div>
</Div>
</Div>
<Input id = "idreset" type = "button" value = "reset"/>
<Input id = "idlock" type = "button" value = "locked"/>
<Input id = "idlockx" type = "button" value = "lock level"/>
<Input id = "idlocky" type = "button" value = "lock vertical"/>
<Input id = "idlimit" type = "button" value = "range lock"/>
<Input id = "idlimitoff" type = "button" value = "cancel range lock"/>
<Br/> Drag and Drop status: <span id = "idshow"> not started </span>
<SCRIPT>
VaR drag = new drag ("iddrag", {mxcontainer: "idcontainer", handle: "idhandle", limit: True,
Onstart: function () {$ ("idshow"). innerhtml = "Start Drag and Drop ";},
Onmove: function () {$ ("idshow"). innerhtml = "Left:" + this. Drag. offsetleft + "; top:" + this. Drag. offsettop ;},
Onstop: function () {$ ("idshow"). innerhtml = "End Drag and Drop ";}
});
$ ("Idreset"). onclick = function (){
Drag. Limit = true;
Drag. mxleft = drag. mxtop = 0;
Drag. mxright = fig = 9999;
Drag. lockx = drag. locky = drag. Lock = false;
}
$ ("Idlock"). onclick = function () {drag. Lock = true ;}
$ ("Idlockx"). onclick = function () {drag. lockx = true ;}
$ ("Idlocky"). onclick = function () {drag. locky = true ;}
$ ("Idlimit"). onclick = function () {drag. mxright = drag. mxbottom = 200; drag. Limit = true ;}
$ ("Idlimitoff"). onclick = function () {drag. Limit = false ;}
</SCRIPT>
</Body>
</Html>
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
