码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript拖拽网页元素

时间:2015-01-25 17:50:45      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE HTML>
<html>
<head>
    <title>javascript drag</title>
    <meta charset="utf-8">
</head>
<body>
    <div id="drag" style="position: absolute;width: 300px;height: 180px;background: #123456;left: 200px;top: 100px;cursor: move;"></div>
</div>
</body>
<script type="text/javascript">
    var obj = document.getElementById(drag);
    obj.onmousedown = function(e) {
        e = e || event || window.event;
        startX = e.clientX;
        startY = e.clientY;
        move = true;
        document.onmousemove = function(e) {
            if (move) {
                e = e || event || window.event;
                obj.style.left = parseInt(obj.style.left) + (e.clientX - startX) + px;
                obj.style.top = parseInt(obj.style.top) + (e.clientY - startY) + px;
                startX = e.clientX;
                startY = e.clientY;
            }
        };
        document.onmouseup = function() {
            move = false;
        }
    };
</script>
</html>

 

JavaScript拖拽网页元素

标签:

原文地址:http://www.cnblogs.com/happyfreelife/p/4248473.html

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