最简洁的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" />
    
    
    <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

转载于:https://www.cnblogs.com/flowerszhong/archive/2011/08/16/2140491.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/362046.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！