JavaScript 元素的拖放事件

为了让元素可拖动，需要使用 HTML5 draggable 属性。
链接和图片默认是可拖动的，不需要 draggable 属性

在拖放的过程中会触发以下事件：

在拖动目标上触发事件 (源元素):

ondragstart - 用户开始拖动元素时触发

ondrag - 元素正在拖动时触发

ondragend - 用户完成元素拖动后触发

释放目标时触发的事件:

ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件

ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件

ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件

ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

将span拖放到div中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function() {


            EventUtil.addHandler(document, "dragstart", function(event) {
                event = EventUtil.getEvent(event);
                //dataTransfer.setData()方法设置数据类型和拖动的数据
                event.dataTransfer.setData("Text", event.target.id);


            });

            / 默认情况下,数据/元素不能在其他元素中被拖放。
            对于drop我们必须防止元素的默认处理
            EventUtil.addHandler(document, "dragover", function(event) {
                event = EventUtil.getEvent(event);
                EventUtil.preventDefault(event);

            });
            /*对于drop,防止浏览器的默认处理数据(在drop中链接是默认打开)
        
            利用dataTransfer.getData()方法获得拖放数据
            拖拖的数据元素id
            拖拽元素附加到drop元素*/
            EventUtil.addHandler(document, "drop", function(event) {
                event = EventUtil.getEvent(event);
                EventUtil.preventDefault(event);
                target = EventUtil.getTarget(event);
                if (event.target.className == "droptarget") {
                    var data = event.dataTransfer.getData("Text");
                    event.target.appendChild(document.getElementById(data));
                }
                // alert("ss");

            });


        }
        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;
                }
            },

            // 解决浏览器兼容性问题
            getEvent: function(event) {
                return event ? event : window.event;
            },

            // 返回事件目标
            getTarget: function(event) {
                return event.target || event.srcElement;
            },

            //取消事件的默认行为。
            preventDefault: function(event) {
                if (event.preventDefault) {
                    event.preventDefault();
                } else {
                    event.returnValue = false;
                }
            },

            // 移除事件处理程序
            removeHandler: function(element, type, handler) {
                if (element.removeEventListener) {
                    element.removeEventListener(type, handler, false);
                } else if (element.detachEvent) {
                    element.detachEvent("on" + type, handler);
                } else {
                    element["on" + type] = null;
                }
            },

            //提供相关元素的信息，relatedTarget这个属性只对与mouseover和mouseout事件才包含值。
            getRelatedTarget: function(event) {
                if (event.relatedTarget) {
                    return event.relatedTarget;
                } else if (event.toElement) {
                    return event.toElement;
                } else if (event.fromElement) {
                    return event.fromElement;
                } else {
                    return null;
                }
            },

            //获取鼠标按钮
            /**
             *  0: 表示没有按下按钮。
                1: 表示按下了主鼠标按钮。
                2: 表示按下了次鼠标按钮。
                3: 表示同时按下了主、次鼠标按钮
                4: 表示按下了中间的鼠标按钮。
                5: 表示同时按下了主鼠标按钮和中间的鼠标按钮。
                6: 表示同时按下了次鼠标按钮和中间的鼠标按钮。
                7: 表示同时按下了三个鼠标按钮。*/
            getButton: function(event) {
                if (document.implementation.hasFeature("MouseEvents", "2.0")) {
                    return event.button;
                } else {
                    switch (event.button) {
                        case 0:
                        case 1:
                        case 3:
                        case 5:
                        case 7:
                            return 0;
                        case 2:
                        case 6:
                            return 2;
                        case 4:
                            return 1;
                    }
                }
            },

            //获得鼠标滚轮的增量值delta
            getWheelDelta: function(event) {
                if (event.wheelDelta) {
                    return (client.engine.opera && client.engine.opera < 9.5 ?
                        -event.wheelDelta : event.wheelDelta);
                } else {
                    return -event.detail * 40;
                }
            },


            //获取字符串编码  主要用于文本框 监听事件是keypress
            getCharCode: function(event) {
                if (typeof event.charCode == "number") {
                    return event.charCode;
                } else {
                    return event.keyCode;
                }
            },

            //取消进一步的事件捕获或者冒泡
            stopPropagation: function(event) {
                if (event.stopPropagation) {
                    event.stopPropagation();
                } else {
                    event.cancelBubble = true;
                }
            }
        };
    </script>
    <style>

    </style>
</head>

<body>
    <a href="https://www.baidu.com" id="dragtarget">百度一下</a>
    <br>
    <br>
    <span draggable="true" id="dragtarget1">阿清呀</span>
    <br>
    <br>
    <div style="width:100px;height:100px;background-color: #bfa;" class="droptarget"></div>

</body>

</html>

愿你的坚持终有收获。