Home > Developer > JavaScript
Zdragdrop Library: http://www.nczonline.net/downloads/
Using the zdragdrop library to implement the drag-and-drop function can greatly reduceCodeQuantity, direct research.
<HTML> <br/> <pead> <br/> <title> simulated drag and drop example </title> <br/> <SCRIPT type = "text/JavaScript" src = "zdragdroplib. JS "> </SCRIPT> <br/> <SCRIPT type =" text/JavaScript "> </P> <p> function doload () {<br/> var odraggable = new zdraggable (document. getelementbyid ("div1"), zdraggable. drag_x | zdraggable. drag_y); <br/> var odroptarget = new zdroptarget (document. getelementbyid ("divdroptarget"); <br/> odraggable. adddroptarget (odroptarget); <br/> odroptarget. addeventlistener ("Drop", function (oevent) {<br/> oevent. relatedtarget. moveTo (odroptarget. getleft (), odroptarget. gettop (); <br/> }); <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 onload = "doload () "> <br/> <p> try dragging the Red Square onto the blue square. </P> <br/> <Div id = "div1"> </div> <br/> <Div id = "divdroptarget"> </div> <br/> </body> <br/> </ptml>
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
