js拖拽的封装

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

#div1 {width: 100px; height: 100px; background: red; position: absolute;}

#img1 { position: absolute;}

</style>

<script>

window.onload = function() {

    var oDiv = document.getElementById('div1');

    var oImg = document.getElementById('img1');

    drag(oImg);

    drag(oDiv);

    function drag(obj) {

        obj.onmousedown = function(ev) {

            var ev = ev || event;

            var disX = ev.clientX - this.offsetLeft;

            var disY = ev.clientY - this.offsetTop;

            if ( obj.setCapture ) {

                obj.setCapture();

            }

            document.onmousemove = function(ev) {

                var ev = ev || event;

                obj.style.left = ev.clientX - disX + 'px';

                obj.style.top = ev.clientY - disY + 'px';

            }

            document.onmouseup = function() {

                document.onmousemove = document.onmouseup = null;

                //释放全局捕获 releaseCapture();

                if ( obj.releaseCapture ) {

                    obj.releaseCapture();

                }

            }

            return false;

        }

    }

}

</script>

</head>

<body>

    <div id="div1"></div>

    <img src="1.jpg" id="img1" />

</body>

</html>
相关文章
