How to use JavaScript to drag 1th/2 page _javascript tips

This article is translated from:http://www.webreference.com/programming/javascript/mk/column2/index.html
All copyrights belong to the original text

JavaScript is characterized by the processing of DOM and the effects of web pages, in most cases we only use the simplest features of the language, such as making pictures of the Carousel/page tab and so on, this article will show you how to make a drag on your own web page.

There are many reasons for your site to add drag-and-drop functionality, the simplest one is data reorganization. For example: You have a sequence of content that allows the user to sort, the user needs to input each entry or select, instead of the previous method is dragging. Perhaps your site also needs a user can drag the navigation window! Then these effects are simple: because you can easily achieve!

The implementation of drag-and-drop on the Web page is not very complicated. First you need to know the mouse coordinates, the second you need to know the user mouse clicks a page element and implement drag and drop, finally we want to implement moving this element.

<script src= "Http://www.blueidea.com/articleimg/2006/07/3791/drag_drop.js" type=text/javascript></ Script> <style type=text/css>li {margin-bottom:10px} OL {margin-top:5px}. Dragcontainer {border-right: #669999 2px solid; padding-right:5px; Border-top: #669999 2px solid; padding-left:5px; Float:left; padding-bottom:0px; margin:3px; Border-left: #669999 2px solid; width:100px; padding-top:5px; Border-bottom: #669999 2px solid}. Overdragcontainer {border-right: #669999 2px solid; padding-right:5px; Border-top: #669999 2px solid; padding-left:5px; Float:left; padding-bottom:0px; margin:3px; Border-left: #669999 2px solid; width:100px; padding-top:5px; Border-bottom: #669999 2px solid}. Overdragcontainer {background-color: #eee}. Dragbox {border-right: #000 1px solid; padding-right:2px; Border-top: #000 1px solid; padding-left:2px; font-size:10px; margin-bottom:5px; padding-bottom:2px; Border-left: #000 1px solid; WIDTH:94px; Cursor:pointer; padding-top:2px; Border-bottom: #000 1px solid; Font-family:verdana, Tahoma, Arial; Background-color: #eee}. Overdragbox {border-right: #000 1px solid; padding-right:2px; Border-top: #000 1px solid; padding-left:2px; font-size:10px; margin-bottom:5px; padding-bottom:2px; Border-left: #000 1px solid; width:94px; Cursor:pointer; padding-top:2px; Border-bottom: #000 1px solid; Font-family:verdana, Tahoma, Arial; Background-color: #eee}. Dragdragbox {border-right: #000 1px solid; padding-right:2px; Border-top: #000 1px solid; padding-left:2px; font-size:10px; margin-bottom:5px; padding-bottom:2px; Border-left: #000 1px solid; width:94px; Cursor:pointer; padding-top:2px; Border-bottom: #000 1px solid; Font-family:verdana, Tahoma, Arial; Background-color: #eee}. Minidragbox {border-right: #000 1px solid; padding-right:2px; Border-top: #000 1px solid; padding-left:2px; font-size:10px; margin-bottom:5px; padding-bottom:2px; Border-left:#000 1px solid; width:94px; Cursor:pointer; padding-top:2px; Border-bottom: #000 1px solid; Font-family:verdana, Tahoma, Arial; Background-color: #eee}. Overdragbox {background-color: #ffff99}. Dragdragbox {background-color: #ffff99}. Dragdragbox {filter:alpha (opacity=50); Background-color: #ff99cc} LEGEND {font-weight:bold; font-size:12px; COLOR: #666699; Font-family:verdana, tahoma, arial} fieldset {padding-right:3px; padding-left:3px; padding-bottom:3px; PADDING-TOP:3PX}. History {font-size:10px; Overflow:auto; width:100%; Font-family:verdana, Tahoma, Arial; HEIGHT:82PX} #DragContainer8 {border-right: #669999 1px solid; padding-right:0px; Border-top: #669999 1px solid; padding-left:5px; padding-bottom:0px; Border-left: #669999 1px solid; width:110px; padding-top:5px; Border-bottom: #669999 1px solid; height:110px}. minidragbox {float:left; margin:0px 5px 5px 0px; width:20px; height:20px} PRE {border-right: #ccc 1px solid; PADDING-right:10px; Border-top: #ccc 1px solid; padding-left:10px; padding-bottom:10px; Border-left: #ccc 1px solid; padding-top:10px; Border-bottom: #ccc 1px solid; Background-color: #f8f8f0} </STYLE> <body> <fieldset id=demo4><legend> Sample-Drag page element </legend > <DIV> <div class=dragcontainer id=dragcontainer4 overclass= "Overdragcontainer" > <div Class=dragbox id=item1 overclass= "Overdragbox" dragclass= "Dragdragbox" >item #1 </DIV> <div class= Dragbox id=item2 overclass= "Overdragbox" dragclass= "Dragdragbox" >item #2 </DIV> <div Class=dragbox Id=item3 overclass= "Overdragbox" dragclass= "Dragdragbox" >item #3 </DIV> <div class=dragbox id=Ite M4 overclass= "Overdragbox" dragclass= "Dragdragbox" >item #4 </DIV></DIV> <div Class=dragconta Iner id=dragcontainer5 overclass= "Overdragcontainer" > <div class=dragbox id=item5 overclass= "OverDrAgbox "dragclass=" Dragdragbox ">item #5 </DIV> <div class=dragbox id=item6 overclass=" Overdragbox " dragclass= "Dragdragbox" >item #6 </DIV> <div class=dragbox id=item7 overclass= "Overdragbox" dragclass= "Dragdragbox" >item #7 </DIV> <div class=dragbox id=item8 overclass= "Overdragbox" Dragcla ss= "Dragdragbox" >item #8 </DIV></DIV> <div class=dragcontainer id=dragcontainer6 overclass= "OverDr Agcontainer "> <div class=dragbox id=item9 overclass=" Overdragbox "dragclass=" Dragdragbox ">Item #9 ;/div> <div class=dragbox id=item10 overclass= "Overdragbox" dragclass= "Dragdragbox" >Item #10 </div > <div class=dragbox id=item11 overclass= "Overdragbox" dragclass= "Dragdragbox" >item #11 </DIV> <div class=dragbox id=item12 overclass= "Overdragbox" dragclass= "Dragdragbox" >item #12 </div></d Iv></div></fiEldset> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Get Mouse Move Information

First we need to get the coordinates of the mouse. We can add a user function to Document.onmousemove:

Copy Code code as follows:

Document.onmousemove = MouseMove;

function MouseMove (EV) {
EV = EV | | window.event;
var mousepos = mousecoords (EV);
}

function Mousecoords (EV) {
if (Ev.pagex | | ev.pagey) {
return {x:ev.pagex, y:ev.pagey};
}
return {
X:ev.clientx + Document.body.scrollleft-document.body.clientleft,
Y:ev.clienty + document.body.scrolltop-document.body.clienttop
};
}

<textarea id="runcode52120"><script> function mouseMove (ev) {ev = EV | | window.event; var mousepos = mousecoords (EV); document.getElementById (' xxx '). Value = mousepos.x; document.getElementById (' yyy '). Value = Mousepos.y; } function mousecoords (EV) {if (Ev.pagex | | ev.pagey) {return {x:ev.pagex, y:ev.pagey}; return {x:ev.clientx + document.body.scrollleft-document.body.clientleft, Y:ev.clienty + docum Ent.body.scrolltop-document.body.clienttop}; } document.onmousemove = MouseMove; </script>mouse X Position: <input id=xxx type=text> Mouse Y Position: <input id=yyy type=text> ;/body> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Current 1/2 page 12 Next read the full text