使用zDragDrop实现拖放的例子

来源：互联网发布：mac 极点五笔下载编辑：程序博客网时间：2024/05/16 19:45

使用zDragDrop库中一些方法

zDraggable.moveTo(x,y)——将zDraggable元素移动到位置x，y。
zDropTarget.getLeft()——返回放置目标的左坐标。
zDropTarget.getTop()——返回放置目标的顶坐标。

<html>    <head>        <title>Simulated Drag And Drop Example</title>        <script type="text/javascript" src="zdragdroplib.js"></script>        <script type="text/javascript">             function doLoad() {                var oDraggable = new zDraggable(document.getElementById("div1"), zDraggable.DRAG_X | zDraggable.DRAG_Y);                var oDropTarget = new zDropTarget(document.getElementById("divDropTarget"));                oDraggable.addDropTarget(oDropTarget);                oDropTarget.addEventListener("drop", function (oEvent) {                     oEvent.relatedTarget.moveTo(oDropTarget.getLeft(), oDropTarget.getTop());                });            }                    </script>        <style type="text/css">            #div1 {                background-color: red;                height: 100px;                width: 100px;                position: absolute;                z-index: 10;            }                        #divDropTarget {                background-color: blue;                height: 200px;                width: 200px;                position: absolute;                left: 300px;                            }        </style>    </head>    <body onload="doLoad()">        <p>Try dragging the red square onto the blue square.</p>        <div id="div1"></div>        <div id="divDropTarget"></div>    </body></html>

前两行JavaScript创建zDraggable和zDropTarget对象。然后，使用addDropTarget将放置目标注册到zDraggable对象上。最后，将drop事件的处理函数添加到放置目标上。这个事件处理函数将可拖动对象移动到放置目标的左上角。记住，在drop事件中，event对象的relatedTarget特性等于可拖动元素。

当然，这些代码必须在页面完全载入后才能调用，为此使用了onload事件处理函数。