码迷,mamicode.com
首页 > Web开发 > 详细

js笔记---拖动元素

时间:2014-11-01 17:39:27      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   os   ar   java   div   on   

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        #img1 { position: absolute; }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var oImg = document.getElementById(‘img1‘);
            drop(oImg);
        }
        function drop(obj) {
            obj.onmousedown = function (ev) {
                var ev = ev || event;
                var liw = ev.clientX - parseInt(getStyle(obj, ‘left‘) == ‘auto‘ ? ‘0‘ : getStyle(obj, ‘left‘));
                var lit = ev.clientY - parseInt(getStyle(obj, ‘top‘) == ‘auto‘ ? ‘0‘ : getStyle(obj, ‘top‘));
                if (obj.getCaptrue) {
                    obj.getCaptrue();
                }
                document.onmousemove = function (ev) {
                    var ev = ev || event;
                    var L = ev.clientX - liw;
                    var T = ev.clientY - lit;
                    if (L < 100) {
                        L = 0;
                    }
                    if (L > document.documentElement.clientWidth - obj.offsetWidth-100) {
                        L = (document.documentElement.clientWidth - obj.offsetWidth);
                    }
                    if (T < 100) {
                        T = 0;
                    }
                    if (T > document.documentElement.clientHeight - obj.offsetHeight - 100) {
                        T = (document.documentElement.clientHeight - obj.offsetHeight);
                    }
                    obj.style.left = L + ‘px‘;
                    obj.style.top = T + ‘px‘;
                }
                document.onmouseup = function () {
                    document.onmousemove = document.onmouseup = null;
                    if (obj.relaseCaptrue) {
                        obj.relaseCaptrue();
                    }
                }
                return false;
            }
        }
        function getStyle(obj, attr) {
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, false)[attr];
            }
        }
    </script>
</head>
<body>
    <img src="images/btn_04.jpg" id="img1" />
    <!--<img src="images/btn_02.jpg" />-->
</body>
</html>

  

js笔记---拖动元素

标签:style   blog   http   io   os   ar   java   div   on   

原文地址:http://www.cnblogs.com/juexin/p/4067279.html

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