professional_javascript_for_web/ch16/DropEffectAndEffectAllowedExample01.htm

<!DOCTYPE html>
<html>
<head>
    <title>dropEffect and effectAllowed Example</title>
    <script src="EventUtil.js"></script>
</head>
<body>
    <p>Try dragging the link over to the red square. This won't work correctly in Firefox or Opera.</p>
    <a href="http://www.wrox.com">Wrox homepage</a>
    <div style="width: 100px; height: 100px; float: right; background: red" id="droptarget"></div>
    <div id="output"></div>
    <script type="text/javascript">
        var droptarget = document.getElementById("droptarget");
        var link = document.links[0];
        
        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 = "link";
                    break;
                case "drop":
                case "dragdrop":
                    droptarget.innerHTML = event.dataTransfer.getData("url") || event.dataTransfer.getData("text/uri-list");
            }

        }

        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);
        

    </script>
</body>
</html>