HTML+CSS网页设计实践教程
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

4.6 实验指导4-2：拖动文字到网页的指定区域

本节实验指导主要利用前面的知识实现一个文本拖放的效果，其中，使用a元素表示被拖放的元素，即源元素或源对象；div元素设置一个长度为200、宽度为200的正方形，表示目标元素或目标对象；另一个div元素显示从源元素拖放到整个过程结束时所触发的事件，实现步骤如下。

（1）在页面中添加源元素、目标元素和处理程序的信息提示元素。代码如下。

    <a href="/index.html">拖动到红色区块打开链接</a>
    <div style="width: 200px; height: 200px; float: right; background: red" id="droptarget"></div>
    <div id="output"></div>

（2）开始向JavaScript脚本中添加函数代码，首先在脚本中创建一个EventUtil对象，它表示一个类，然后再添加代码。如下所示。

    var EventUtil = {
        addHandler: function (element, type, handler) {
            if (element.addEventListener) {
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent("on" + type, handler);
            } else {
                element["on" + type] = handler;
            }
        },
        preventDefault: function (event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },
    };

（3）创建拖动过程中与拖动事件有关的函数，在该函数代码中通过event.type获取事件类型，然后在switch语句中的有关事件中设置dropEffect属性和effectAllowed属性的值。代码如下。

    function handleEvent(event) {
        document.getElementById("output").innerHTML += event.type + "<br>";
        switch (event.type) {
        case "dragstart":
        case "draggesture":
            event.dataTransfer.dropEffect = "link";
            break;
        case "dropenter":
        case "dragover":
            EventUtil.preventDefault(event);
            event.dataTransfer.effectAllowed = "all";
            break;
        case "drop":
        case "dragdrop":
            droptarget.innerHTML = event.dataTransfer.getData("url") || event.dataTransfer.getData("text/uri-list");
        }
    }

（4）获取页面中与拖动有关的元素，再调用函数类EventUtil中的内容为元素添加与拖放有关的事件。代码如下。

    var droptarget = document.getElementById("droptarget");
    var link = document.links[0];
    EventUtil.addHandler(droptarget, "dragenter", handleEvent);
    EventUtil.addHandler(droptarget, "dragover", handleEvent);
    EventUtil.addHandler(droptarget, "dragleave", handleEvent);
    EventUtil.addHandler(droptarget, "drop", handleEvent);
    EventUtil.addHandler(link, "dragstart", handleEvent);

（5）运行页面拖动内容到指定的对象中，在Opera浏览器中拖动时的效果如图4-28所示。将源对象全部拖动到目标对象后进行释放，拖放完成效果如图4-29所示。

图4-28 拖动对象时的效果

图4-29 拖放完成时的效果

上一章目录下一章