JS-元素的拖拽

发表于 作者 评心静气 
<script>
    var image = document.getElementById("smiley");
    function handleEvent(event){
        document.getElementById("output").innerHTML += event.type + "<br>";
    }
    EventUtil.addHandler(image, "dragstart", handleEvent);
    EventUtil.addHandler(image, "drag", handleEvent);
    EventUtil.addHandler(image, "dragend", handleEvent);
</script>
// 图片拖拽到input时，会输入图片的地址
<body>
    <p>Try dragging the image over the textbox.</p>
    <img id="smiley" src="smile.gif">
    <input type="text" id="droptarget" value="">
    <div id="output"></div>
    <script>
        var droptarget = document.getElementById("droptarget");
        function handleEvent(event){
            document.getElementById("output").innerHTML += event.type + "<br>";
        }
        EventUtil.addHandler(droptarget, "dragenter", handleEvent);
        EventUtil.addHandler(droptarget, "dragover", handleEvent);
        EventUtil.addHandler(droptarget, "dragleave", handleEvent);
        EventUtil.addHandler(droptarget, "drop", handleEvent);
    </script>
</body>
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");
        });
};

拖拽-获取数据传递

<body>
    <p>Try dragging the blue square over to the red square. You should see a smiley face in Firefox, Safari, and Chrome.</p>
    <div id="dragme" draggable="true" style="-khtml-user-drag:element; width: 20px; height: 20px; background: blue"></div>
    <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"),
            dragme = document.getElementById("dragme"),
            img = new Image();
        img.src = "smile.gif";
        function handleEvent(event){
            document.getElementById("output").innerHTML += event.type + "<br>";
            switch(event.type){
                case "dragstart":
                    event.dataTransfer.setData("Text", "Yippee!");
                    event.dataTransfer.setDragImage(img, 25, 25);
                    break;
                case "dropenter":
                case "dragover":
                    EventUtil.preventDefault(event);
                    break;
                case "drop":
                case "dragdrop":
                    droptarget.innerHTML = event.dataTransfer.getData("Text");
                    EventUtil.preventDefault(event);
            }
        }
        EventUtil.addHandler(droptarget, "dragenter", handleEvent);
        EventUtil.addHandler(droptarget, "dragover", handleEvent);
        EventUtil.addHandler(droptarget, "dragleave", handleEvent);
        EventUtil.addHandler(droptarget, "drop", handleEvent);
        EventUtil.addHandler(dragme, "dragstart", handleEvent);
    </script>
</body>