Home > Developer > JavaScript
In the preceding example, the zdragdrop function in Javascript demonstrates the use of the zdragdrop library for drag-and-drop. However, it is a little troublesome to develop the drag-and-drop effect without relying on any libraries. Here we first introduce a method to simulate drag-and-drop effects through mouse events.
1. first look at the following results:
<HTML> <br/> <pead> <br/> <title> simulated drag and drop example </title> <br/> <SCRIPT type = "text/JavaScript"> </P> <p> function handlemousemove (oevent) {<br/> var odiv = document. getelementbyid ("div1"); <br/> odiv. style. left = oevent. clientx; <br/> odiv. style. top = oevent. clienty; <br/>}</P> <p> </SCRIPT> <br/> <style type = "text/CSS"> <br/> # div1 {<br/> background-color: red; <br/> Height: 100px; <br/> width: 100px; <br/> position: absolute; <br/>}< br/> </style> <br/> </pead> <br/> <body onmousemove = "handlemousemove (Event) "> <br/> <p> try moving your mouse around. </P> <br/> <p> <Div id = "div1"> </div> </P> <br/> </body> <br/> </ptml>
This only achieves the effect of moving the DIV following the mouse.
Let's look at the following example:
<HTML> <br/> <pead> <br/> <title> simulated drag and drop example </title> <br/> <SCRIPT type = "text/JavaScript" src = "eventutil. JS "> </SCRIPT> <br/> <SCRIPT type =" text/JavaScript "> </P> <p> function handlemousemove () {<br/> var oevent = eventutil. getevent (); <br/> var odiv = document. getelementbyid ("div1"); <br/> odiv. style. left = oevent. clientx; <br/> odiv. style. top = oevent. clienty; <br/>}</P> <p> function handlemousedown () {<br/> eventutil. addeventhandler (document. body, "mousemove", handlemousemove); <br/> eventutil. addeventhandler (document. body, "mouseup", handlemouseup); <br/>}</P> <p> function handlemouseup () {<br/> eventutil. removeeventhandler (document. body, "mousemove", handlemousemove); <br/> eventutil. removeeventhandler (document. body, "mouseup", handlemouseup ); <br/>}</P> <p> </SCRIPT> <br/> <style type = "text/CSS"> <br/> # div1 {<br/> background-color: red; <br/> Height: 100px; <br/> width: 100px; <br/> position: absolute; <br/>}< br/> </style> <br/> </pead> <br/> <body> <br/> <p> try dragging the Red Square. </P> <br/> <p> <Div id = "div1" onmousedown = "handlemousedown () "> </div> </P> <br/> </body> <br/> </ptml>
During running, the upper left corner of the DIV is always aligned with the mouse pointer. Optimization first:
<HTML> <br/> <pead> <br/> <title> simulated drag and drop example </title> <br/> <SCRIPT type = "text/JavaScript" src = "eventutil. JS "> </SCRIPT> <br/> <SCRIPT type =" text/JavaScript "> </P> <p> var idiffx = 0; <br/> var idiffy = 0; </P> <p> function handlemousemove () {<br/> var oevent = eventutil. getevent (); <br/> var odiv = document. getelementbyid ("div1"); <br/> odiv. style. left = oevent. clientx-idiffx; <br/> odiv. style. top = oevent. clienty-idiffy; <br/>}</P> <p> function handlemousedown () {<br/> var oevent = eventutil. getevent (); <br/> var odiv = document. getelementbyid ("div1"); <br/> idiffx = oevent. clientx-odiv. offsetleft; <br/> idiffy = oevent. clienty-odiv. offsettop; </P> <p> eventutil. addeventhandler (document. body, "mousemove", handlemousemove); <br/> eventutil. addeventhandler (document. body, "mouseup", handlemouseup); <br/>}</P> <p> function handlemouseup () {<br/> eventutil. removeeventhandler (document. body, "mousemove", handlemousemove); <br/> eventutil. removeeventhandler (document. body, "mouseup", handlemouseup ); <br/>}</P> <p> </SCRIPT> <br/> <style type = "text/CSS"> <br/> # div1 {<br/> background-color: red; <br/> Height: 100px; <br/> width: 100px; <br/> position: absolute; <br/>}< br/> </style> <br/> </pead> <br/> <body> <br/> <p> try dragging the Red Square. </P> <br/> <p> <Div id = "div1" onmousedown = "handlemousedown (Event) "> </div> </P> <br/> </body> <br/> </ptml>
It feels comfortable. Haha.
Based on the above method, you can simulate the drag-and-drop effect. See the code Demo:
<HTML> <br/> <pead> <br/> <title> simulated drag and drop example </title> <br/> <SCRIPT type = "text/JavaScript" src = "eventutil. JS "> </SCRIPT> <br/> <SCRIPT type =" text/JavaScript "> </P> <p> var idiffx = 0; <br/> var idiffy = 0; </P> <p> function handlemousemove () {<br/> var oevent = eventutil. getevent (); <br/> var odiv = document. getelementbyid ("div1"); <br/> odiv. style. left = oevent. clientx-idiffx; <br /> Odiv. style. top = oevent. clienty-idiffy; <br/>}</P> <p> function handlemousedown () {<br/> var oevent = eventutil. getevent (); <br/> var odiv = document. getelementbyid ("div1"); <br/> idiffx = oevent. clientx-odiv. offsetleft; <br/> idiffy = oevent. clienty-odiv. offsettop; </P> <p> eventutil. addeventhandler (document. body, "mousemove", handlemousemove); <br/> eventutil. addeventhandler (document. BOD Y, "mouseup", handlemouseup); <br/>}</P> <p> function handlemouseup () {<br/> var oevent = eventutil. getevent (); <br/> eventutil. removeeventhandler (document. body, "mousemove", handlemousemove); <br/> eventutil. removeeventhandler (document. body, "mouseup", handlemouseup); </P> <p> If (isoverdroptarget (oevent. clientx, oevent. clienty) {<br/> alert ("dropped! "); <Br/> var odiv = document. getelementbyid ("div1"); <br/> var otarget = document. getelementbyid ("divdroptarget"); <br/> odiv. style. left = otarget. offsetleft; <br/> odiv. style. top = otarget. offsettop; <br/>}</P> <p> function isoverdroptarget (IX, Iy) {<br/> var otarget = document. getelementbyid ("divdroptarget"); <br/> var ix1 = otarget. offsetleft; <br/> var ix2 = ix1 + otarget. offsetwidth; <br/> var iy1 = otarget. offsettop; <br/> var iy2 = iy1 + otarget. offsetheight; </P> <p> return (IX> = ix1 & IX <= ix2 & Iy> = iy1 & Iy <= iy2 ); <br/>}</P> <p> </SCRIPT> <br/> <style type = "text/CSS"> <br/> # div1 {<br/> background-color: red; <br/> Height: 100px; <br/> width: 100px; <br/> position: absolute; <br/> Z-index: 10; <br/>}</P> <p> # divdroptarget {<br/> background-color: Blue; <br/> Height: 200px; <br/> width: 200px; <br/> position: absolute; <br/> left: 300px; <br/>}< br/> </style> <br/> </pead> <br/> <body> <br/> <p> try dragging the Red Square onto the blue square. </P> <br/> <Div id = "div1" onmousedown = "handlemousedown (Event) "> </div> <br/> <Div id =" divdroptarget "> </div> <br/> </body> <br/> </ptml>
Note that the above JS library eventutil. js code is used:
VaR eventutil = new object; <br/> eventutil. addeventhandler = function (otarget, seventtype, fnhandler) {<br/> If (otarget. addeventlistener) {<br/> otarget. addeventlistener (seventtype, fnhandler, false); <br/>} else if (otarget. attachevent) {<br/> otarget. attachevent ("On" + seventtype, fnhandler); <br/>}else {<br/> otarget ["on" + seventtype] = fnhandler; <br/>}< br/>}; </P> <p> eventutil. remove Eventhandler = function (otarget, seventtype, fnhandler) {<br/> If (otarget. removeeventlistener) {<br/> otarget. removeeventlistener (seventtype, fnhandler, false); <br/>} else if (otarget. detachevent) {<br/> otarget. detachevent ("On" + seventtype, fnhandler); <br/>}else {<br/> otarget ["on" + seventtype] = NULL; <br/>}< br/>}; </P> <p> eventutil. formatevent = function (oevent) {</P> <p> If (typeo F oevent. charcode = "undefined") {<br/> oevent. charcode = (oevent. type = "keypress ")? Oevent. keycode: 0; <br/> oevent. ischar = (oevent. charcode> 0); <br/>}</P> <p> If (oevent. srcelement &&! Oevent.tar get) {<br/> oevent. eventphase = 2; <br/> oevent. pagex = oevent. clientx + document. body. scrollleft; <br/> oevent. pagey = oevent. clienty + document. body. scrolltop; </P> <p> If (! Oevent. preventdefault) {<br/> oevent. preventdefault = function () {<br/> This. returnvalue = false; <br/>}; <br/>}</P> <p> If (oevent. type = "mouseout") {<br/> oevent. relatedtarget = oevent. toelement; <br/>} else if (oevent. type = "Mouseover") {<br/> oevent. relatedtarget = oevent. fromelement; <br/>}</P> <p> If (! Oevent. stoppropagation) {<br/> oevent. stoppropagation = function () {<br/> This. cancelbubble = true; <br/>}; <br/>}</P> <p> oevent.tar get = oevent. srcelement; <br/> oevent. time = (new date ). gettime (); </P> <p >}</P> <p> return oevent; <br/>}; </P> <p> eventutil. getevent = function () {<br/> If (window. event) {<br/> return this. formatevent (window. event); <br/>}else {<br/> return eventutil. getevent. caller. arguments [0]; <br/>}< br/> };
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
