Js drag-and-drop-and-zoom-in layer drag-and-drop effects implementation method, js drag-and-drop
This article describes how to implement the layer-based drag-and-drop special effect of JavaScript. Share it with you for your reference. The specific implementation method is as follows:
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 = gb2312"/>
<Title> Js Implementation Layer dragging effect, you can also drag and drop to enlarge </title>
<Style>
* {Margin: 0; padding: 0 ;}
# Zhezhao {
Width: 100%;
Height: 100%;
Background: # f00;
Filter: alpha (opacity: 0 );
Opacity: 0;
Z-index: 9999;
Position: absolute;
Top: 0;
Left: 0;
Display: none;
}
# Div2 {
Width: 200px;
Height: 200px;
Position: relative;
Background: # EEEEEE;
Border: 1px solid # f00;
}
# Div1 {
Width: 15px;
Height: 15px;
Background: #99CC00;
Position: absolute;
Right: 0px;
Bottom: 0px;
Cursor: nw-resize;
Overflow: hidden;
Font-size: 12px;
Text-align: center;
Line-height: 15px;
Color: # FFFFFF;
Float: right;
Z-index: 3;
}
# Right {
Width: 15px;
Height: 100%;
Background: # f00;
Float: right;
Position: absolute;
Right: 0;
Top: 0;
Cursor: e-resize;
Overflow: hidden;
Filter: alpha (opacity: 0 );
Opacity: 0;
Z-index: 1;
}
# Bottom {
Width: 100%;
Height: 15px;
Background: # f00;
Position: absolute;
Left: 0;
Bottom: 0;
Cursor: n-resize;
Overflow: hidden;
Filter: alpha (opacity: 0 );
Opacity: 0;
Z-index: 1;
}
# Div2 p {
Padding: 10px;
Line-height: 24px;
Font-size: 13px;
Text-indent: 24px;
Color: #996600;
}
# Div2 h2 {
Width: 100%;
Height: 25px;
Line-height: 25px;
Font-size: 14px;
Background: # CC9900;
Color: # FFFFFF;
Text-indent: 15px;
Cursor: move;
Overflow: hidden;
}
</Style>
<Script type = "text/javascript">
Window. onload = function ()
{
Var oDiv = document. getElementById ("div1 ");
Var oDiv2 = document. getElementById ("div2 ");
Var zhezhao = document. getElementById ("zhezhao ");
Var h2 = oDiv2.getElementsByTagName ("h2") [0];
Var right = document. getElementById ("right ");
Var bottom = document. getElementById ("bottom ");
Var mouseStart = {};
Var divStart = {};
Var rightStart = {};
Var bottomStart = {};
// Drag to the right
Right. onmousedown = function (ev)
{
Var oEvent = ev | event;
MouseStart. x = oEvent. clientX;
MouseStart. y = oEvent. clientY;
RightStart. x = right. offsetLeft;
If (right. setCapture)
{
Right. onmousemove = doDrag1;
Right. onmouseup = stopDrag1;
Right. setCapture ();
}
Else
{
Document. addEventListener ("mousemove", doDrag1, true );
Document. addEventListener ("mouseup", stopDrag1, true );
}
};
Function doDrag1 (ev)
{
Var oEvent = ev | event;
Var l = oEvent. clientX-mouseStart.x + rightStart. x;
Var w = l + oDiv. offsetWidth;
If (w <oDiv. offsetWidth)
{
W = oDiv. offsetWidth;
}
Else if (w> document.doc umentElement. clientWidth-oDiv2.offsetLeft)
{
W=document.doc umentElement. clientWidth-oDiv2.offsetLeft-2;
}
ODiv2.style. width = w + "px ";
};
Function stopDrag1 ()
{
If (right. releaseCapture)
{
Right. onmousemove = null;
Right. onmouseup = null;
Right. releaseCapture ();
}
Else
{
Document. removeEventListener ("mousemove", doDrag1, true );
Document. removeEventListener ("mouseup", stopDrag1, true );
}
};
// Drag down
Bottom. onmousedown = function (ev)
{
Var oEvent = ev | event;
MouseStart. x = oEvent. clientX;
MouseStart. y = oEvent. clientY;
BottomStart. y = bottom. offsetTop;
If (bottom. setCapture)
{
Bottom. onmousemove = doDrag2;
Bottom. onmouseup = stopDrag2;
Bottom. setCapture ();
}
Else
{
Document. addEventListener ("mousemove", doDrag2, true );
Document. addEventListener ("mouseup", stopDrag2, true );
}
};
Function doDrag2 (ev)
{
Var oEvent = ev | event;
Var t = oEvent. clientY-mouseStart.y + bottomStart. y;
Var h = t + oDiv. offsetHeight;
If (h <oDiv. offsetHeight)
{
H = oDiv. offsetHeight;
}
Else if (h> document.doc umentElement. clientHeight-oDiv2.offsetTop)
{
Hsf-document.doc umentElement. clientHeight-oDiv2.offsetTop-2;
}
ODiv2.style. height = h + "px ";
};
Function stopDrag2 ()
{
If (bottom. releaseCapture)
{
Bottom. onmousemove = null;
Bottom. onmouseup = null;
Bottom. releaseCapture ();
}
Else
{
Document. removeEventListener ("mousemove", doDrag2, true );
Document. removeEventListener ("mouseup", stopDrag2, true );
}
};
// Drag both the left and right sides
ODiv. onmousedown = function (ev)
{
Var oEvent = ev | event;
MouseStart. x = oEvent. clientX;
MouseStart. y = oEvent. clientY;
DivStart. x = oDiv. offsetLeft;
DivStart. y = oDiv. offsetTop;
If (oDiv. setCapture)
{
ODiv. onmousemove = doDrag;
ODiv. onmouseup = stopDrag;
ODiv. setCapture ();
}
Else
{
Document. addEventListener ("mousemove", doDrag, true );
Document. addEventListener ("mouseup", stopDrag, true );
}
Zhezhao. style. display = 'block ';
};
Function doDrag (ev)
{
Var oEvent = ev | event;
Var l = oevents. clientX-mouseStart.x + divStart. x;
Vart = oEvent. clientY-mouseStart.y + divStart. y;
Var w = l + oDiv. offsetWidth;
Var h = t + oDiv. offsetHeight;
If (w <oDiv. offsetWidth)
{
W = oDiv. offsetWidth;
}
Else if (w> document.doc umentElement. clientWidth-oDiv2.offsetLeft)
{
W=document.doc umentElement. clientWidth-oDiv2.offsetLeft-2;
}
If (h <oDiv. offsetHeight)
{
H = oDiv. offsetHeight;
}
Else if (h> document.doc umentElement. clientHeight-oDiv2.offsetTop)
{
Hsf-document.doc umentElement. clientHeight-oDiv2.offsetTop-2;
}
ODiv2.style. width = w + "px ";
ODiv2.style. height = h + "px ";
};
Function stopDrag ()
{
If (oDiv. releaseCapture)
{
ODiv. onmousemove = null;
ODiv. onmouseup = null;
ODiv. releaseCapture ();
}
Else
{
Document. removeEventListener ("mousemove", doDrag, true );
Document. removeEventListener ("mouseup", stopDrag, true );
}
Zhezhao. style. display = 'none ';
};
// H2 drag-and-drop
H2.onmousedown = function (ev)
{
Var oEvent = ev | event;
MouseStart. x = oEvent. clientX;
MouseStart. y = oEvent. clientY;
DivStart. x = oDiv2.offsetLeft;
DivStart. y = oDiv2.offsetTop;
If (h2.setCapture)
{
H2.onmousemove = doDrag3;
H2.onmouseup = stopDrag3;
H2.setCapture ();
}
Else
{
Document. addEventListener ("mousemove", doDrag3, true );
Document. addEventListener ("mouseup", stopDrag3, true );
}
Zhezhao. style. display = 'block ';
};
Function doDrag3 (ev)
{
Var oEvent = ev | event;
Var l = oevents. clientX-mouseStart.x + divStart. x;
Vart = oEvent. clientY-mouseStart.y + divStart. y;
If (l <0)
{
L = 0;
}
Else if (l> document.doc umentElement. clientWidth-oDiv2.offsetWidth)
{
Lw.document.doc umentElement. clientWidth-oDiv2.offsetWidth;
}
If (t <0)
{
T = 0;
}
Else if (t> document.doc umentElement. clientHeight-oDiv2.offsetHeight)
{
Tsf-document.doc umentElement. clientHeight-oDiv2.offsetHeight;
}
ODiv2.style. left = l + "px ";
ODiv2.style. top = t + "px ";
};
Function stopDrag3 ()
{
If (h2.releaseCapture)
{
H2.onmousemove = null;
H2.onmouseup = null;
H2.releaseCapture ();
}
Else
{
Document. removeEventListener ("mousemove", doDrag3, true );
Document. removeEventListener ("mouseup", stopDrag3, true );
}
Zhezhao. style. display = 'none ';
}
};
</Script>
</Head>
<Body>
<Div id = "div2">
<Div style = "width: 100%; height: 100%; overflow: hidden;">
<H2> perfect drag and drop <P> experience the good JavaScript web page dragging. In addition to dragging, you can also drag and zoom in, like Windows, as long as you press and hold the lower right corner of the layer, you can freely zoom in or out. If you want to use it, you can encapsulate Js in the code into a class. It is more reasonable to introduce it from the outside. '</P>
<Div id = "right"> </div>
<Div id = "div1"> drag </div>
<Div id = "bottom"> </div>
</Div>
</Div>
<Div id = "zhezhao"> </div>
</Body>
</Html>
I hope this article will help you design javascript programs.