Home > Developer > JavaScript
First, introduce some of the relevant events and methods of this program:
Event.button: event occurs when the action of the mouse if 1 is the left mouse button 2 for the right mouse button but now seems to have 8 of MS has been the direction of the development of the mouse is 8 keys?
ParentNode: Parent Node
Event. ClientX: the mouse x value when the event occurs
Event. ClientY: The mouse y value when the event occurs
SetCapture () Method: establishes the communication between the object and the mouse, which means that the mouse acts on the object when the mouse is tracked
ReleaseCapture () Method: Cut off the communication between the object and the mouse
The JavaScript program is as follows:
Program code
<script>
var Move=false;
function StartDrag (obj)//definition of functions to be dragged
{
if (event.button==1&&event.srcelement.tagname.touppercase () = = "DIV")//determine the location of the event to prevent invalid drag
{
Obj.setcapture (); Tracks mouse actions on the current object
Obj.style.background= "#999"; Change color
Move=true;
}
}
function Drag (obj)//define Drag functions
{
if (move)
{
var Oldwin=obj.parentnode; Define Parent Object
oldwin.style.left=event.clientx-50;//defines the current location of the parent object
oldwin.style.top=event.clienty-10;
}
}
function Stopdrag (obj)//define STOP drag functions
{
Obj.style.background= "#000"; Change color
Obj.releasecapture (); Stop mouse tracking on the current object
Move=false;
}
</script>
HTML code
<body>
<style>
Body{font-family:verdana;font-size:11px;color: #333;}
#win1 {[position:absolute;left:100;top:100;width:200px;height:150px;border:1px solid #000;}
. Title{width:100%;background: #000; Height:18px;color: #fff; cursor:hand;}
</style>
<script>
var Move=false;
function StartDrag (obj)
{
if (event.button==1&&event.srcelement.tagname.touppercase () = = "DIV")
{
Obj.setcapture ();
Obj.style.background= "#999";
Move=true;
}
}
function Drag (obj)
{
if (move)
{
var Oldwin=obj.parentnode;
oldwin.style.left=event.clientx-50;
oldwin.style.top=event.clienty-10;
}
}
function Stopdrag (obj)
{
Obj.style.background= "#000";
Obj.releasecapture ();
Move=false;
}
</script>
<div id= "Win1" >
<div class= "title" Onmousemove= "Drag (this)" > Window 1</div>
This is a moveable window.<br>
MoreInfo in www.achome.cn.
</div>
</body>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
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
