帮看看这个拖动层的js代码怎么改

到犀牛书里去找一段代码,很好用的

解决方案 »

  1.   

    我懒啊，给你段代码，兼容FF/IE<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv ="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head><body>
    <div id="toolbar" style="position:absolute; left:100px; top:100px; background-color:white; border: solid black;">
    <div  style="background-color:gray; border-bottom:dotted black; padding:3px; font-family:sans-serif; font-weight:bold;" onmousedown="beginDrag(this.parentNode, event);">drag me</div>
    <p>This is a test.</p>
    </div>
    <script type="text/javascript">
    <!--
    function beginDrag(elementToDrag, event) {
    var deltaX = event.clientX - parseInt(elementToDrag.style.left);
    var deltaY = event.clientY - parseInt(elementToDrag.style.top);

    elementToDrag.style.cursor = "move";

    if (document.addEventListener) { //2 级 DOM事件模型
    document.addEventListener("mousemove", moveHandler, true);
    document.addEventListener("mouseup", upHandler, true);
    }
    else if (document.attachEvent) { //IE5+事件模型
    document.attachEvent("onmousemove", moveHandler);
    document.attachEvent("onmouseup", upHandler);
    }
    else { //IE4事件模型
    var oldmovehandler = document.onmousemove;
    var olduphandler = document.onmouseup;
    document.onmousemove = moveHandler;
    document.onmouseup = upHandler;
    }

    //禁止起泡
    if (event.stopPropagation) //DOM2
    event.stopPropagation();
    else event.cancelBubble = true; //IE

    if (event.preventDefault)
    event.preventDefault();
    else event.cancelBubble = true;

    function moveHandler(e) {
    if (!e)
    e = window.event;

    elementToDrag.style.left = (e.clientX - deltaX) + "px";
    elementToDrag.style.top = (e.clientY - deltaY) + "px"; if (e.stopPropagation)
    e.stopPropagation();
    else e.cancelBubble = true;
    }

    function upHandler(e) {
    if (!e)
    e = window.event;

    elementToDrag.style.cursor = "default";

    if (document.removeEventListener) { //DOM2
    document.removeEventListener('mouseup', upHandler, true);
    document.removeEventListener('mousemove', moveHandler, true);
    }
    else if (document.detachEvent) { //IE5+
    document.detachEvent("onmousemove", moveHandler);
    document.detachEvent("onmouseup", upHandler);
    }
    else { //IE4
    document.onmouseup = olduphandler;
    document.onmousemove = oldmovehandler;
    }

    if (e.stopPropagation)
    e.stopPropagation();
    else e.cancelBubble = true;
    }

    }
    //-->
    </script>
    </body>
    </html>