码迷,mamicode.com
首页 > 其他好文 > 详细

div层的拖动(setCapture())

时间:2015-02-13 10:10:35      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:

<!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>

 

div层的拖动(setCapture())

标签:

原文地址:http://www.cnblogs.com/yudishow/p/4289696.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!