professional_javascript_for_web/ch16/CustomDraggableExample01.htm

<!DOCTYPE html>
<html>
<head>
    <title>Custom Draggable Example</title>
    <script src="EventUtil.js"></script>
</head>
<body>
    <p>Try dragging the image over the square.</p>
    
    <div style="width:80px;height:80px;background:url(smile.gif)" id="dragme" draggable="true"></div>
    <div style="width: 100px; height: 100px; float: right; background: red" id="droptarget"></div>
    <div id="output"></div>
    <script>
        var droptarget = document.getElementById("droptarget");
        
        function handleEvent(event){
            document.getElementById("output").innerHTML += event.type + "<br>";
            if (event.type == "dropenter" || event.type == "dragover" || event.type=="drop"){
                EventUtil.preventDefault(event);
            }
        }

        EventUtil.addHandler(droptarget, "dragenter", handleEvent);
        EventUtil.addHandler(droptarget, "dragover", handleEvent);
        EventUtil.addHandler(droptarget, "dragleave", handleEvent);
        EventUtil.addHandler(droptarget, "drop", handleEvent);
        
        window.onload = function(){
        
            var dragme = document.getElementById("dragme");
            
                //backwards compatibility with IE < 10
                if (!("draggable" in document.createElement("div")) && typeof dragme.dragDrop != "undefined"){
                    dragme.onmousedown = function(){
                        dragme.dragDrop();
                    };
                }            
            
                EventUtil.addHandler(dragme, "dragstart", function(event){
                    event.dataTransfer.setData("Text", "Foo");
                });
            
            
        };

    </script>
</body>
</html>