js笔记---拖动元素

<!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="data:images/btn_04.jpg" id="img1" />
    <!--<img src="data:images/btn_02.jpg" />-->
</body>
</html>