学习Ajax框架之dojo：第五节——dojo拖拽事件小结（附源代码）

在实际应用中，当拖拽动作开始或者结束的时候会进行一些相应的后天操作，这时就需要使用dojo的事件系统为拖拽事件添加事件处理函数。本文分别给出了基类dojo.dnd.DragSource和dojo.dnd.DropTarget的事件的用法，并附有源代码。

第一部分：

为一个元素增加拖拽效果时，需要建立一个类的实例。dojo针对不同的拖拽功能实现了dojo.dnd.HtmlDragSource, dojo.dnd.HtmlDragCopySource和dojo.dnd.HtmlDragMoveSource三个类。这三个类具有共同的基类dojo.dnd.DragSource，该类定义了以下事件。

onSelected:当被拖拽元素被选中时触发，选中拖拽元素事件的处理函数
onDragStart:当拖拽动作开始时触发，拖拽开始事件的处理函数
onDragEnd:当拖拽动作结束时触发，拖拽结束事件的处理函数

注册事件响应函数的方法是使用dojo的事件绑定机制（dojo.event.connect/kwConnect），下面通过一个简单的实例演示如何添加拖拽事件的处理函数，示例页面的代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset='UTF-8" />
        <title>dojo.dnd 拖拽事件————onDragStart, onDragEnd, onSelected</title>
        <script type="text/javascript">
            var djConfig = {
                isDebug: true
            };
        </script>
        <script type="text/javascript" src="dojo-0.3.1-ajax/dojo.js">
        </script>
        <style type="text/css">
            ul {
                position: relative;
                list-style: none;
                margin: 0;
                padding: 0;
                overflow: visible;
            }

            li {
                margin: 3px 0;
                padding: 3px 3em 3px 10px;
                border: 2px solid #456;
                background-color: #cde;
                cursor: move;
            }
        </style>
        <script type="text/javascript">
            dojo.require("dojo.dnd.HtmlDragMove");
            dojo.require("dojo.event.*");
            function init(){
                //新建一个dojo.HtmlDragSource类的实例，使div元素具有被拖拽的功能
                var drag = new dojo.dnd.HtmlDragSource(dojo.byId("div"));

                //注册拖拽结束事件的处理函数
                dojo.event.connect(drag, "onDragEnd", function(evt){
                    //输出调试信息
                    dojo.debug("drag end");
                });

                //注册拖拽开始事件的处理函数
                dojo.event.connect(drag, "onDragStart", function(evt){
                    dojo.debug("drag start");
                })

                //注册选中拖拽元素事件的处理函数
                dojo.event.connect(drag, "onSelected", function(evt){
                    //alert("drag selected");
                    dojo.debug("drag selected");
                });
            }
            //页面加载时调用init()
            dojo.event.connect(dojo, "loaded", "init");

            function init11(){
                //新建一个dojo.HtmlDragSource类的实例，使div元素具有被拖拽的功能
                var drag11 = new dojo.dnd.HtmlDragSource(dojo.byId("list1"));

                //注册拖拽结束事件的处理函数
                dojo.event.connect(drag11, "onDragEnd", function(evt){
                    //输出调试信息
                    dojo.debug("drag11 end");
                });

                //注册拖拽开始事件的处理函数
                dojo.event.connect(drag11, "onDragStart", function(evt){
                    dojo.debug("drag11 start");
                })

                //注册选中拖拽元素事件的处理函数
                dojo.event.connect(drag11, "onSelected", function(evt){
                    //alert("drag selected");
                    dojo.debug("drag11 selected");
                });
            }
            //页面加载时调用init11()
            dojo.event.connect(dojo, "loaded", "init11");
        </script>
    </head>
    <body>
        <div id="div" style="width:200px;height:200px;background:blue">
            onDragStart, onDragEnd, onSelected 的使用方法
        </div>
        <ul id="list1">
            <li id="drag11">
                列表1，条目1
            </li>
            <li id="drag12">
                列表1，条目2
            </li>
            <li id="drag13">
                列表1，条目3
            </li>
        </ul>
    </body>
</html>

上述的示例的页面运行效果可以是：在被拖拽元素div或者list1的下方输出调试信息，该信息反映了这个过程中三个事件被触发的先后过程。

实现了整体拖拽，那么列表项的每一项都可以被拖拽吗，并且同时执行以上三个事件？答案是肯定的，只须修改function函数。function函数的写法应该结合前面第四节给出的可拖拽代码进行修改。代码修改为：

                    dojo.debug("drag11 selected");
                });
            }

上述的示例的页面运行效果可以是：在被拖拽元素list1或者list2的下方输出调试信息，该信息反映了这个过程中三个事件被触发的先后过程。

第二部分：

在拖拽元素的过程中，我们需要关注的不仅仅是被拖拽的元素，接受拖拽元素的容器也是同等重要的。与接受拖拽元素容器相关的类是dojo.dnd.HtmlDropTarget，它的基类是dojo.dnd.DropTarget。在dojo.dnd.DropTarget类中定义了以下事件：

onDragOver: 元素被拖拽到容器上方时触发
onDragOut: 元素被拖拽出容器区域时触发
onDragMove: 元素在容器内部被拖拽时时触发
onDropStart/onDrop/onDropEnd：元素在容器内部被拖拽时触发

下面通过一个示例来演示接受拖拽元素容器的事件处理，相关代码如下：

上述的示例的页面运行效果可以是：一个列表项从list1被拖拽到list2的过程，在下方输出调试信息，该信息反映了这个过程中事件被触发的情况。

类似过程如下：

DEBUG: drop1 onDragOver

DEBUG: drop1 onDragMove

DEBUG: drop1 onDragOut

DEBUG: drop2 onDragMove

DEBUG: drop2 onDropStart

DEBUG: drop2 onDragOut

DEBUG: drop2 onDrop

DEBUG: drop2 onDropEnd

posted on 2008-09-04 15:27 飞翔的Angela 阅读(4210) 评论(0) 编辑收藏举报