If you constrain a div's draggable range to a specified element:
Drag effect everyone may be familiar with, but usually the drag range is limited, through an example code to explain how to drag a div to a specified range of elements, code example is as follows:
<!DOCTYPE HTML> <HTML> <Head> <MetaCharSet= "Utf-8"> <Metaname= "Author"content= "http://www.softwhy.com/" /> <title>Ant Tribe</title> <styletype= "Text/css">#box{width:400px;Height:300px;Background-color:Red;margin:0px Auto;position:relative;}#drag{width:50px;Height:50px;background:Green;position:Absolute;}</style><Scripttype= "Text/javascript">window.onload=function(){ varObox=document.getElementById ("Box"); varOdrag=document.getElementById ("Drag"); varFlag=false; varx, y; varOl,ot; Odrag.onmousedown=function(EV) {varEV=window.event||ev; Flag=true; X=Ev.clientx; Y=Ev.clienty; OL=Odrag.offsetleft; OT=Odrag.offsettop; } document.onmousemove=function(EV) {if(Flag==false) return; varEV=window.event||ev; var_x,_y; _x=Ev.clientx-x+ol; _y=Ev.clienty-y+ot; if(_x<0) _x=0; if(_y<0) _y=0; if(_x>Obox.offsetwidth-odrag.offsetwidth) _x=Obox.offsetwidth-Odrag.offsetwidth; if(_y>Obox.offsetheight-odrag.offsetheight) _y=Obox.offsetheight-Odrag.offsetheight; Odrag.style.left=_x+"px"; Odrag.style.top=_y+"px"; } document.onmouseup=function() {flag=false;}}</Script> </Head> <Body> <DivID= "box"> <DivID= "Drag"></Div></Div></Body> </HTML>
The above code to achieve our requirements, the specified green div can be dragged within the scope of the Red Div, the following describes its implementation process.
A. Code Comment:
1.window.onload=function () {}, the contents of the document are fully loaded before executing the code in the function.
2.var Obox=document.getelementbyid ("box"), gets the id attribute value for the box element object.
3.var Odrag=document.getelementbyid ("drag"), gets the ID property of the element object that will be drag.
4.var Flag=false, declares a variable flag and assigns the initial value to False, which is used to identify whether it can be dragged, false and not draggable, to true can be dragged.
5.var x, Y, declares two variables that are used to store the coordinates of the mouse pointer in the browser client area when the mouse is pressed.
6.var Ol,ot, declares two variables that are used to store the green div distance from the Red Div.
7.odrag.onmousedown=function (EV) {}, register the onmousedown event handler for the Green Div, the EV is the event object.
8.var ev=window.event| | EV, event object compatibility processing.
9.flag=true, set to true, which means that the mouse can be dragged when it is pressed in the green Div.
10.x=ev.clientx, gets the distance from the left side of the browser client area when the mouse pointer is pressed.
11.y=ev.clienty, gets the distance of the mouse pointer from the top of the client area of the browser when the mouse is pressed.
12.ol=odrag.offsetleft, gets the distance of the left edge of the green div from the left side of the red Div when the mouse is pressed.
13.ot=odrag.offsettop, gets the distance of the top edge of the green div from the upper side of the red Div when the mouse is pressed.
14.document.onmousemove=function (EV) {}, registering the OnMouseMove event handler for document, many friends may have to register it on document instead of Odrag. This is to prevent drag invalidation when the mouse pointer moves out of the Odrag while the mouse is dragging.
15.if (Flag==false) return, which jumps directly if the flag value is false.
16.var ev=window.event| | EV, event object compatibility processing.
17.var _x,_y, declares two local variables that are used to store the left and top property values of the green Div.
18._x=ev.clientx-x+ol, gets the left property value during the drag process, a mathematical problem.
19._y=ev.clienty-y+ot, gets the value of the top property during the drag process, a mathematical problem.
20.if (_x<0) _x=0 prevents the left edge from being exceeded.
21.if (_y<0) _y=0 to prevent exceeding the top edge.
22.if (_x>obox.offsetwidth-odrag.offsetwidth) _x=obox.offsetwidth-odrag.offsetwidth prevents the right edge from being exceeded.
23.if (_y>obox.offsetheight-odrag.offsetheight) _y=obox.offsetheight-odrag.offsetheight, prevents the lower edge from being exceeded.
24.odrag.style.left=_x+ "px", odrag.style.top=_y+ "px" sets the left and top values of the green Div.
25.document.onmouseup=function () {flag=false;}, when the mouse is released, set flag to false.
two. Related reading:
1.onmousedown events can be found inJavaScript's onmousedown eventA chapter.
2.var ev=window.event| | EV can be found invar ev=window.event| | What is the role of EV?A chapter.
3.clientX refer toClientx Event properties for JavaScriptA chapter.
4.offsetLeft refer toscrolltop, offsetheight, and offsettop attribute usageA chapter.
5. Event bubbling can be found inA brief introduction to JavaScript event bubblingA chapter.
6.onmousemove events can be found inJavaScript's onmousemove eventA chapter.
7.onmouseup events can be found inJavaScript's onmouseup eventA chapter.
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=11818
For more information, refer to: http://www.softwhy.com/javascript/
If you constrain a div's draggable range to a specified element
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
