关于javascript实现拖动层移动的问题

我想实现用javascript来拖动一个层移动，那js是基于事件实现的，那这个触发的事件是什么？应该是鼠标事件吧。谢谢各位大大。

解决方案 »

  1.   


    <html>
        <head>
            <title>Simulated Drag And Drop Example</title>        <script type="text/javascript">
                
                var iDiffX = 0;
                var iDiffY = 0;
                var oDiv;
                function handleMouseMove() {
                    var oEvent = EventUtil.getEvent();
                    //oDiv = document.getElementById("001");
                    oDiv.style.left = oEvent.clientX - iDiffX;
                    oDiv.style.top = oEvent.clientY - iDiffY;
                }
                var index=4;      
                function handleMouseDown(id) {
                    var oEvent = EventUtil.getEvent();
                    oDiv = document.getElementById(id);
                    oDiv.style.zIndex=++index;
                    iDiffX = oEvent.clientX - oDiv.offsetLeft;
                    iDiffY = oEvent.clientY - oDiv.offsetTop;
                
                    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);
                }
                var EventUtil = new Object;
                EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler) {
                    if (oTarget.addEventListener) {
                        oTarget.addEventListener(sEventType, fnHandler, false);
                    } else if (oTarget.attachEvent) {
                        oTarget.attachEvent("on" + sEventType, fnHandler);
                    } else {
                        oTarget["on" + sEventType] = fnHandler;
                    }
                };            EventUtil.removeEventHandler = function (oTarget, sEventType, fnHandler) {
                    if (oTarget.removeEventListener) {
                        oTarget.removeEventListener(sEventType, fnHandler, false);
                    } else if (oTarget.detachEvent) {
                        oTarget.detachEvent("on" + sEventType, fnHandler);
                    } else {
                        oTarget["on" + sEventType] = null;
                    }
                };            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>
            <style type="text/css">
                #001 {
                    background-color: yellow;
                    height: 100px;
                    width: 100px;
                    position: absolute;            }
                #002 {
                    background-color: green;
                    height: 100px;
                    width: 100px;
                    position: absolute;
                }
                #003 {
                    background-color: blue;
                    height: 100px;
                    width: 100px;
                    position: absolute;
                }
                #004 {
                    background-color: red;
                    height: 100px;
                    width: 100px;
                    position: absolute;
                }
            </style>
        </head>
        <body>
            <div id="001" onmousedown='handleMouseDown("001")' style="z-index:1">TEST1</div><br />
            <div id="002" onmousedown='handleMouseDown("002")' style="z-index:2">TEST2</div><br />
            <div id="003" onmousedown='handleMouseDown("003")' style="z-index:3">TEST3</div><br />
            <div id="004" onmousedown='handleMouseDown("004")' style="z-index:4">TEST4</div><br />
        </body>
    </html>
      

  2.   

    多浏览器版本<html>
        <head>
            <title>Test</title>
            <script type="text/javascript">
                
                var iDiffX = 0;
                var iDiffY = 0;
                       
                function handleMouseMove() {
                    var oEvent = EventUtil.getEvent();
                    var oDiv = document.getElementById("div1");
                    oDiv.style.left = oEvent.clientX - iDiffX;
                    oDiv.style.top = oEvent.clientY - iDiffY;
                }
                           
                function handleMouseDown() {
                    var oEvent = EventUtil.getEvent();
                    var oDiv = document.getElementById("div1");
                    iDiffX = oEvent.clientX - oDiv.offsetLeft;
                    iDiffY = oEvent.clientY - oDiv.offsetTop;
                
                    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);
                }
                var EventUtil = new Object;
                EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler) {
                    if (oTarget.addEventListener) {
                        oTarget.addEventListener(sEventType, fnHandler, false);
                    } else if (oTarget.attachEvent) {
                        oTarget.attachEvent("on" + sEventType, fnHandler);
                    } else {
                        oTarget["on" + sEventType] = fnHandler;
                    }
                };            EventUtil.removeEventHandler = function (oTarget, sEventType, fnHandler) {
                    if (oTarget.removeEventListener) {
                        oTarget.removeEventListener(sEventType, fnHandler, false);
                    } else if (oTarget.detachEvent) {
                        oTarget.detachEvent("on" + sEventType, fnHandler);
                    } else {
                        oTarget["on" + sEventType] = null;
                    }
                };            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>
            <style type="text/css">
                #div1 {
                    background-color: red;
                    height: 100px;
                    width: 100px;
                    position: absolute;
                }
            </style>
        </head>
        <body>
            <p><div id="div1" onmousedown="handleMouseDown(event)"></div> </p>
    </body>
    </html>