最简洁的js鼠标拖曳效果【原】

请原谅我是一个标题档，不过还是很简洁的，因为只是初步的实现的拖曳效果
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-cn" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>DragDrop</title>
    <meta name="author" content="flowerszhong">
    <meta name="date" content="">
    <link href="" rel="stylesheet" type="text/css" />
    <!--[if IE]>
      <script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
  <![endif]-->
    <!-- <script src="http://code.jquery.com/jquery-latest.js"></script> -->
    <style type="text/css">
        .redBorderBox
        {
            border: 2px solid red;
            position: absolute;
            width: 60px;
            height: 60px;
            cursor: move;
            background-color: Red;
        }
    </style>
</head>
<body>
    <div id="hd">
    </div>
    <div id="bd">
        <div class="redBorderBox" id="dragObj1">
            i am not dragObj</div>
        <div class="redBorderBox dragObj" id="dragObj2" style="top: 90px; left: 90px;">
            u can drag me</div>
    </div>
    <div id="ft">
    </div>
</body>

<script>
    /* 鼠标拖动 */
    (function() {
        var oDrag = "";
        var ox, oy, nx, ny, dy, dx;
        function drag(e) {
            var e = e ? e : event;
            oDrag = e.target ? e.target : e.srcElement;
            if (oDrag.className.indexOf("dragObj") == -1) { oDrag = ""}
            ox = e.clientX;
            oy = e.clientY;
        }
        function dragPro(e) {
            if (oDrag != "") {
                var e = e ? e : event;
                dx = parseInt(oDrag.style.left);
                dy = parseInt(oDrag.style.top);
                nx = e.clientX;
                ny = e.clientY;
                oDrag.style.left = (dx + (nx - ox)) + "px";
                oDrag.style.top = (dy + (ny - oy)) + "px";
                ox = nx;
                oy = ny;
            }
        }
        document.onmousedown = function(e) { drag(e); }
        document.onmouseup = function() { oDrag = ""; }
        document.onmousemove = function(event) { dragPro(event); }
    })();
</script>

</html>
感谢你留言，转载请声明出处：http://www.cnblogs.com/flowerszhong
posted @ 2011-08-16 13:16  码不能停  阅读(1511)  评论(2)  编辑  收藏  举报