使用zDragDrop实现拖放的例子

最新推荐文章于 2024-11-12 16:29:15 发布

star_bright

最新推荐文章于 2024-11-12 16:29:15 发布

阅读量603

点赞数

JavaScript 同时被 2 个专栏收录

4 篇文章

订阅专栏

HTML

2 篇文章

订阅专栏

本文介绍如何使用zDragDrop库实现拖放效果。通过创建zDraggable和zDropTarget对象，并在drop事件中调整可拖动元素的位置，实现将红色方块拖放到蓝色方块上的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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 οnlοad="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事件处理函数。