首页 > 代码库 > js笔记---拖动元素

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

  

js笔记---拖动元素