The code to be dragged by a mouse, I feel very interesting.
This example needs to be mastered, capture the mouse, get the mouse position (equivalent to the object), release the mouse capture, the scroll distance of the document.
1. setCapture () Sets the mouse capture of the object belonging to the current document.
2. Event.OffsetX Sets or gets the X coordinate of the mouse pointer position relative to the object that triggered the event.
3. Event.offsety settings or get the Y coordinate of the mouse pointer position relative to the object of the trigger event.
4. ReleaseCapture () Releases the mouse capture of the object in the current document.
5. ScrollLeft setting or get the distance between the left boundaries of the object and the top of the window.
6. ScrollTop setting or get the distance between the top of the object, the topmost of the object.
7. with the default object for one or more statements.
8. Event.x, Event.y Sets or gets the X, Y coordinate of the mouse pointer relative to the window object.
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"
XML: LANG
= "en"
LANG
= "en"
>
<
HEAD
>
<
Title
>
Title
>
<
Style
Type
= "Text / CSS"
>
# l1
{
Position
:
Absolute
;
TOP
:
100px
;
Left
:
100px
;
Width
:
100px
;
HEIGHT
:
150px
;
Border
:
1px solid #ccc
;
BACKGROUND
:
# f00
;
Z-Index
:
1
}
# l2
{
Position
:
Absolute
;
TOP
:
150px
;
Left
:
150px
;
Width
:
100px
;
HEIGHT
:
150px
;
Border
:
1px solid # 666
;
BACKGROUND
:
# 0f0
;
Z-Index
:
2
}
# l3
{
Position
:
Absolute
;
TOP
:
200px
;
Left
:
200px
;
Width
:
100px
;
HEIGHT
:
150px
;
Border
:
1px solid # 999
;
BACKGROUND
:
# 00F
;
Z-Index
:
3
;
}
Style
>
<
Script
Type
= "Text / JavaScript"
>
VAR
X, Y, Z, Down
=
False
, OBJ;
FUNCTION
INIT () {OBJ
=
Event.srcelement;
//
Get focus object
Obj.setcapture ();
//
Set the mouse capture
z
=
Obj.Style.zindex;
//
Get the original Z-axis position
Obj.Style.zindex
=
100
;
//
Set in the top
x
=
Event.offsetx; //
Get x positions with objects of mouse pointers relative to trigger events
y
=
Event.offsety;
//
Get the Y position of the mouse pointer relative to the object of the trigger event
Down
=
True
;
//
Set the mouse state to press the status
}
FUNCTION
Moveit () {
IF
(Down
&&&&
Event.srcelement
==
Obj) {
WITH
(Obj.style) {PosleFT
=
Document.body.scrollleft
Event.x
-
X; Postop
=
Document.body.scrolltop
Event.y
-
Y;}}}
FUNCTION
Stopdrag () {Down
=
False
Obj.Style.zindex
=
z; OBJ.RELEASECAPTURE ();
Script
>
HEAD
>
<
Body
>
<
Div
id
= "L1"
OnMouseDown
= "init ()"
OnMousemove
= "Moveit ()"
OnMouseup
= "stopdrag ()"
>
Level1
Div
>
<
Div
id
= "L2"
OnMouseDown
= "init ()"
OnMousemove
= "Moveit ()"
OnMouseup
= "stopdrag ()"
>
Level2
Div
>
<
Div
id
= "L3"
OnMouseDown
= "init ()"
OnMousemove
= "Moveit ()"
OnMouseup
= "stopdrag ()"
>
Level3
Div
>
Body
>
HTML
>
