首頁 > 開發者 > JavaScript
zDragDrop庫：http://www.nczonline.net/downloads/
使用zDragDrop庫實現拖放功能能夠大大減少代碼量，直接研究。
<html><br /> <head><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 /> </head><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 /></html>
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
