jquery方法+js一般方法+js面向对象方法拖拽

多种方法制作的div拖拽，简单实用，包括了jquery方法、js一般方法、js面向对象方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>拖拽</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
#drag{background: #ccc;height: 200px;width: 300px;text-align: center;line-height: 200px;position: absolute;left: 20px;top: 20px;}
</style>
<body>
<div id="drag">
    我可以拖动哦！！
</div>
<script type="text/javascript">
    //jquery方法拖拽
    /**$(function(){    
        var move = false; //判断是否被移动
        var a = 0;
        var b = 0;
        $("#drag").mousedown(function(event){
            move = true;
            a = event.pageX - parseInt($("#drag").css("left"));
            b = event.pageY - parseInt($("#drag").css("top"));
        })
        $(document).mousemove(function(event){
            if(move){
                var x = event.pageX - a;
                var y = event.pageY - b;
                $("#drag").css({left: x,top: y})
            }
        }).mouseup(function(){
            move = false;
        })
    })**/
    //简单的js一般方法
    /**var drag = document.getElementById("drag");
    var a = 0;
    var b = 0;
    drag.onmousedown = function(event){
        var event = event||window.event;
        a = event.clientX-drag.offsetLeft;
        b = event.clientY-drag.offsetTop;
        drag.onmousemove = function(event){
            var event = event||window.event;
            var x = event.clientX - a;
            var y = event.clientY - b;
            drag.style.left = x + "px";
            drag.style.top = y + "px";
        }
        document.onmouseup=function(){
            drag.onmousemove = null;
            drag.onmouseup = null;
        }
    }**/
    //js面向对象方法
    function Drag(obj){
        this.drag = document.getElementById(obj);
        //alert(obj);
        this.a = 0;
        this.b = 0;
        var that = this;
        this.drag.onmousedown = function(event){
            that.mousedown(event);
        }
    }
    Drag.prototype.mousedown = function(event){
        var event = event||window.event;
        this.a = event.clientX-this.drag.offsetLeft;
        this.b = event.clientY-this.drag.offsetTop;
        var that = this;
        document.onmousemove=function(event){
            that.mousemove(event)
        }
        document.onmouseup=function(){
            that.mouseup()
        }
    }
    Drag.prototype.mousemove = function(event){
        var event = event||window.event;
        var x = event.clientX - this.a;
        var y = event.clientY - this.b;
        this.drag.style.left = x + "px";
        this.drag.style.top = y + "px";
    }
    Drag.prototype.mouseup=function(){
        document.onmousemove = null;
        document.onmouseup = null;
    }
    new Drag("drag");
</script>
</body>
</html>
posted on 2012-08-24 22:27 ゞ╃漃瘼青賰阅读(1155) 评论(0) 编辑收藏举报