资江河畔

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

div层的拖动(setCapture()) 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        #main div {
            position: absolute;
            width: 220px;
            height: 150px;
            border: 1px solid #999;
        }
    </style>
    <script type="text/javascript">
        var a;
        document.onmouseup = function () {
            if (!a)return;
            document.all ? a.releaseCapture() : window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
            a = "";
        };
        document.onmousemove = function (d) {
            if (!a)return;
            if (!d)d = event;
            a.style.left = (d.clientX - b) + "px";
            a.style.top = (d.clientY - c) + "px";
        };
        function $(o, e) {
            a = o;
//            console.log(a.setCapture)
            b = e.clientX - parseInt(a.style.left);
            c = e.clientY - parseInt(a.style.top);
            document.all ? a.setCapture() : window.captureEvents(Event.MOUSEMOVE);
        }
    </script>
</head>
<body>
<div id="main">
    <div style="left:100px;top:100px;background:#fc9;" onmousedown="$(this,event)">1</div>
    <!--<div style="left:400px;top:100px;background:#9cf;" onmousedown="$(this,event)">2</div>-->
    <!--<div style="left:700px;top:100px;background:#f9c;" onmousedown="$(this,event)">3</div>-->
    <!--<div style="left:100px;top:300px;background:#9fc;" onmousedown="$(this,event)">4</div>-->
    <!--<div style="left:400px;top:300px;background:#c9f;" onmousedown="$(this,event)">5</div>-->
    <!--<div style="left:700px;top:300px;background:#cf9;" onmousedown="$(this,event)">6</div>-->
</div>
</body>
</html>

 

posted on 2015-02-13 09:45  资江河畔  阅读(355)  评论(0)    收藏  举报