Drag with JavaScript 2)

You must first declare an evnet object. whenever you move the mouse, click, or press a button, it will correspond to an event. in Internet Explorer, event is a global variable and will be stored in window. event. in Firefox, or in other browsers, Event Events are obtained by corresponding user-defined functions. when we assign the mousemove function to document. onmousemove, mousemove will get the mouse movement event.

(EV = EV | window. in this way, ev obtains the event in all browsers, and in Firefox, "| window. event does not work, because EV already has a value assignment. EV is empty in MSIE, so eV is set to window. event.

Because in this articleArticleSo we designed the mousecoords function, which contains only one parameter, that is, the event.

We need to run in other browsers headed by MSIE and Firefox. firefox uses event. pagex and event. pagey to indicate the cursor position in the upper left corner of the document. if you have a 500*500 window and your mouse is in the middle, the paegx and Pagey will be 250. When you scroll down the Page 750 PX, The Pagey will be. pagex remains unchanged, or 250.

MSIE is opposite to this, MSIE will event. clientx and event. clienty represents the location of the mouse and IE window, not the document. when we have a 500*500 window and the mouse is in the middle, the clientx and clienty are also 250. If you scroll vertically to any position, the clienty is still 250, because the relative ie window is not changed. to get the correct result, we must add the scrollleft and scrolltop attributes relative to the mouse position of the document. finally, because MSIE does not have a starting position of 0, 0, because the 2px border is usually set, and the Border width is included in the document. body. the clientleft and clienttop attributes are added to the cursor position.

Fortunately, the mousecoords function is complete and we don't worry about coordinates anymore.

Capture mouse clicks

Next time, we will know when to click and when to release the mouse. if we skip this step, we will never be aware of the action when moving the mouse over it during drag and drop, which will be annoying and intuitive.

There are two functions to help us: onmousedown and onmouseup. we pre-set the function to receive the document. onmousemove, which looks like we will get the document. onmousedown and document. onmouseup. but when we get document. when onmousedown, we also obtain the click attributes of any object, such as text, images, and tables. we only want to get the properties that need to be dragged, so we set the function to get the objects we need to move.

Run Code Box
<SCRIPT> <br/> function mousedown (EV) {<br/> EV = EV | window. event; <br/> var target = ev.tar GET | eV. srcelement; <br/> If (target. onmousedown | target. getattribute ('dragobj ') {<br/> return false; <br/>}< br/> function makeclickable (item) {<br/> If (! ITEM) return; <br/> item. onmousedown = function (EV) {<br/> document. getelementbyid ('clickimage '). value = This. name; <br/>}< br/> document. onmousedown = mousedown; <br/> window. onload = function () {<br/> makeclickable (document. getelementbyid ('clickimage1 '); <br/> makeclickable (document. getelementbyid ('clickimage2'); <br/> makeclickable (document. getelementbyid ('clickimage3 '); <br/> makeclickable (document. getelementbyid ('clickimage4 ')); <br/>}</SCRIPT> <br/> <fieldset id = demo3> <br/> <p> <br/> demo-click any image <br/> </p> <br/> src = "/articleimg/2006/07/3791/drag_drop_spade.gif" <br/> name = spade> src = "/articleimg/2006/07/3791/drag_drop_heart.gif" <br/> name = heart> src = "/articleimg/ 2006/07/3791/drag_drop_diamond.gif "<br/> name = diamond> src ="/articleimg/2006/07/3791/drag_drop_club.gif "<br/> name = club> <br/> <br> you clicked on: <input id = clickimage type = "text"> </fieldset>
[Ctrl + A select all tips: you can modify some code and then press run]

Move an element

We know how to capture the mouse movement and click. the rest is the moving element. first, you need to determine a specific page location. The CSS style sheet should use 'absolute '. setting the absolute position of an element means that we can use the style sheet. top and. left to locate, you can use the relative position to locate. we move the mouse all relative to the top-left of the page. Based on this, we can proceed to the next step.

When we define item. style. Position = 'absolute ', all operations change the left and top coordinates, and then it moves.

Document. onmousemove = mousemove;
Document. onmouseup = mouseup;

VaR dragobject = NULL;
VaR mouseoffset = NULL;

Function getmouseoffset (target, Ev ){
Ev = EV | window. event;

VaR docpos = getposition (target );
VaR mousepos = mousecoords (EV );
Return {X: mousepos. X-docpos. X, Y: mousepos. Y-docpos. y };
}

Function getposition (e ){
VaR left = 0;
VaR Top = 0;

While (E. offsetparent ){
Left + = E. offsetleft;
Top + = E. offsettop;
E = E. offsetparent;
}

Left + = E. offsetleft;
Top + = E. offsettop;

Return {X: Left, Y: Top };
}

Function mousemove (EV ){
Ev = EV | window. event;
VaR mousepos = mousecoords (EV );

If (dragobject ){
Dragobject. style. Position = 'absolute ';
Dragobject. style. Top = mousepos. Y-mouseoffset. Y;
Dragobject. style. Left = mousepos. X-mouseoffset. X;

Return false;
}
}
Function mouseup (){
Dragobject = NULL;
}

Function makedraggable (item ){
If (! ITEM) return;
Item. onmousedown = function (EV ){
Dragobject = this;
Mouseoffset = getmouseoffset (this, Ev );
Return false;
}
}