拖拽

最新推荐文章于 2025-05-01 14:33:43 发布

lx251845027

最新推荐文章于 2025-05-01 14:33:43 发布

阅读量412

点赞数

文章标签： function div date html null ie

<html>
    <head>
        <title>Simulated Drag And Drop Example</title>
        <script type="text/javascript" >
  var EventUtil = new Object;
  //添加事件处理
EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler) {
   // EventUtil.addEventHandler(document.body, "mousemove", handleMouseMove);
if (oTarget.addEventListener){//firefox
        oTarget.addEventListener(sEventType, fnHandler, false);
    } else if (oTarget.attachEvent) {//IE
        oTarget.attachEvent("on" + sEventType, fnHandler);

    } else {//others
        oTarget["on" + sEventType] = fnHandler;

    }
};
        //删除事件处理
EventUtil.removeEventHandler = function (oTarget, sEventType, fnHandler) {
    if (oTarget.removeEventListener) {//firefox
        oTarget.removeEventListener(sEventType, fnHandler, false);
    } else if (oTarget.detachEvent) {//IE
        oTarget.detachEvent("on" + sEventType, fnHandler);
    } else { //others
        oTarget["on" + sEventType] = null;
    }
};
//事件格式化，将ie下的对象尽可能的调整为DOM的事件模型
EventUtil.formatEvent = function (oEvent) {

    if (typeof oEvent.charCode == "undefined") {
        oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
        oEvent.isChar = (oEvent.charCode > 0);
    }

    if (oEvent.srcElement && !oEvent.target) {
        oEvent.eventPhase = 2;
        oEvent.pageX = oEvent.clientX + document.body.scrollLeft;
        oEvent.pageY = oEvent.clientY + document.body.scrollTop;

        if (!oEvent.preventDefault) {
                oEvent.preventDefault = function () {
                    this.returnValue = false;
                };
        }

        if (oEvent.type == "mouseout") {
            oEvent.relatedTarget = oEvent.toElement;
        } else if (oEvent.type == "mouseover") {
            oEvent.relatedTarget = oEvent.fromElement;
        }

        if (!oEvent.stopPropagation) {
                oEvent.stopPropagation = function () {
                    this.cancelBubble = true;
                };
        }

        oEvent.target = oEvent.srcElement;
        oEvent.time = (new Date).getTime();

    }

    return oEvent;
};
//获得事件对象
EventUtil.getEvent = function() {
    if (window.event) {
        return this.formatEvent(window.event);
    } else {
        return EventUtil.getEvent.caller.arguments[0];
    }
};

  </script>
        <script type="text/javascript">

            function handleMouseMove() {
                var oEvent = EventUtil.getEvent();
                var oDiv = document.getElementById("div1");

                oDiv.style.left = oEvent.clientX;//获取鼠标位置
    oDiv.style.top = oEvent.clientY;
            }

            function handleMouseDown() {
                EventUtil.addEventHandler(document.body, "mousemove", handleMouseMove);
                EventUtil.addEventHandler(document.body, "mouseup", handleMouseUp);
            }

            function handleMouseUp() {
                EventUtil.removeEventHandler(document.body, "mousemove", handleMouseMove);
                EventUtil.removeEventHandler(document.body, "mouseup", handleMouseUp);
            }

        </script>
        <style type="text/css">
            #div1 {
                background-color: red;
                height: 100px;
                width: 100px;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <p>Try dragging the red square.</p>
        <p><div id="div1" οnmοusedοwn="handleMouseDown()"></div> </p>
    </body>
</html>