Home > Developer > JavaScript
Copy codeThe Code is as follows:
<! 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 = UTF-8"/>
<Title> drag a library </title>
<Style type = "text/css">
Div, h2, p {margin: 0; padding: 0 ;}
Body {font: 14px/1.5 arial ;}
# Box {width: 100px; height: 100px; background: # fef4eb; padding: 5px; margin: 50px; border: 1px solid # f60 ;}
# Box. title {height: 25px; background: # f60 ;}
# Tool {margin-bottom: 10px ;}
</Style>
<Script type = "text/javascript">
Function Drag ()
{
// Initialization
This. initialize. apply (this, arguments)
}
Drag. prototype = {
// Initialization
Initialize: function (drag, options)
{
This. drag = this. $ (drag );
This. _ x = this. _ y = 0;
This. _ moveDrag = this. bind (this, this. moveDrag );
This. _ stopDrag = this. bind (this, this. stopDrag );
This. setOptions (options );
This. handle = this. $ (this. options. handle );
This. maxContainer = this. $ (this. options. maxContainer );
This. maxTop = Math. max (this. maxContainer. clientHeight, this. maxContainer. scrollHeight)-this. drag. offsetHeight;
This. maxLeft = Math. max (this. maxContainer. clientWidth, this. maxContainer. scrollWidth)-this. drag. offsetWidth;
This. limit = this. options. limit;
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. style. cursor = "move ";
This. changeLayout ();
This. addHandler (this. handle, "mousedown", this. bind (this, this. startDrag ))
},
ChangeLayout: function ()
{
This. drag. style. top = this. drag. offsetTop + "px ";
This. drag. style. left = this. drag. offsetLeft + "px ";
This. drag. style. position = "absolute ";
This. drag. style. margin = "0"
},
StartDrag: function (event)
{
Var event = event | window. event;
This. _ x = event. clientX-this. drag. offsetLeft;
This. _ y = event. clientY-this. drag. offsetTop;
This. addHandler (document, "mousemove", this. _ moveDrag );
This. addHandler (document, "mouseup", this. _ stopDrag );
Event. preventDefault & event. preventDefault ();
This. handle. setCapture & this. handle. setCapture ();
This. onStart ()
},
MoveDrag: function (event)
{
Var event = event | window. event;
Var iTop = event. clientY-this. _ y;
Var iLeft = event. clientX-this. _ x;
If (this. lock) return;
This. limit & (iTop <0 & (iTop = 0), iLeft <0 & (iLeft = 0), iTop> this. maxTop & (iTop = this. maxTop), iLeft> this. maxLeft & (iLeft = this. maxLeft ));
This. lockY | (this. drag. style. top = iTop + "px ");
This. lockX | (this. drag. style. left = iLeft + "px ");
Event. preventDefault & event. preventDefault ();
This. onMove ()
},
StopDrag: function ()
{
This. removeHandler (document, "mousemove", this. _ moveDrag );
This. removeHandler (document, "mouseup", this. _ stopDrag );
This. handle. releaseCapture & this. handle. releaseCapture ();
This. onStop ()
},
// Parameter settings
SetOptions: function (options)
{
This. options =
{
Handle: this. drag, // event object
Limit: true, // lock range
Lock: false, // lock location
LockX: false, // lock the horizontal position
LockY: false, // lock the vertical position
MaxContainer: document.doc umentElement | document. body, // specify the container Restriction
OnStart: function () {}, // callback function at start
OnMove: function () {}, // callback function when dragging
OnStop: function () {}// callback function upon stopping
};
For (var p in options) this. options [p] = options [p]
},
// Obtain the id
$: Function (id)
{
Return typeof id = "string "? Document. getElementById (id): id
},
// Add binding event
AddHandler: function (oElement, sEventType, fnHandler)
{
Return oElement. addEventListener? OElement. addEventListener (sEventType, fnHandler, false): oElement. attachEvent ("on" + sEventType, fnHandler)
},
// Delete the binding event
RemoveHandler: function (oElement, sEventType, fnHandler)
{
Return oElement. removeEventListener? OElement. removeEventListener (sEventType, fnHandler, false): oElement. detachEvent ("on" + sEventType, fnHandler)
},
// Bind the event to the object
Bind: function (object, fnHandler)
{
Return function ()
{
Return fnHandler. apply (object, arguments)
}
}
};
// Application
Window. onload = function ()
{
Var oBox = document. getElementById ("box ");
Var oTitle = oBox. getElementsByTagName ("h2") [0];
Var oSpan = document. getElementsByTagName ("span") [0];
Var oDrag = new Drag (oBox, {handle: oTitle, limit: false });
Var aInput = document. getElementsByTagName ("input ");
// Lock range interface
AInput [0]. onclick = function ()
{
ODrag. limit =! ODrag. limit;
This. value = oDrag. limit? "Unlock range": "lock range"
};
// Horizontal lock Interface
AInput [1]. onclick = function ()
{
ODrag. lockX =! ODrag. lockX;
This. value = oDrag. lockX? "Cancel horizontal lock": "Horizontal lock"
};
// Vertical lock Interface
AInput [2]. onclick = function ()
{
ODrag. lockY =! ODrag. lockY;
This. value = oDrag. lockY? "Cancel vertical lock": "vertical lock"
};
// Lock location Interface
AInput [3]. onclick = function ()
{
ODrag. lock =! ODrag. lock;
This. value = oDrag. lock? "Unlock location": "lock location"
};
// How to start dragging
ODrag. onStart = function ()
{
OSpan. innerHTML = "start dragging"
};
// How to start dragging
ODrag. onMove = function ()
{
OSpan. innerHTML = "left:" + this. drag. offsetLeft + ", top:" + this. drag. offsetTop
};
// How to start dragging
ODrag. onStop = function ()
{
OSpan. innerHTML = "End drag"
};
};
</Script>
</Head>
<Body>
<Div id = "tool">
<Input type = "button" value = "lock range"/>
<Input type = "button" value = "Horizontal lock"/>
<Input type = "button" value = "vertical lock"/>
<Input type = "button" value = "lock location"/>
</Div>
<P> Drag and Drop status: <span> not started </span> </p>
<Div id = "box">
<H2 class = "title"> </Div>
</Body>
</Html>
</Td>
</Tr>
</Table>
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
