面向对象实例--拖拽

上一节用面向对象的方法写了选项卡，这次我们来讲讲拖拽

面向过程的拖拽

拖拽主要是对位置的定义，绑定监听器监听鼠标移动的位置。

<!DOCTYPE html>
<html>
<head>
	<title>拖拽</title>
	<style type="text/css">
        #div1{
        	width: 100px;
        	height: 100px;
        	background: red;
        	position: absolute;
        }
	</style>
	<script type="text/javascript">
        window.onload = function() {
        	var div = document.getElementById('div1');
        	div.onmousedown = function (ev){
        	    var oEvent = ev||event;
        	    var disX = oEvent.clientX - div.offsetLeft;
                var disY = oEvent.clientY - div.offsetTop;
                document.onmouseover = function(ev){
                    div.style.left = oEvent.clientX - disX + 'px';
                    div.style.top = oEvent.clientY - disY + 'px'; 
                }
                document.onmouseup = function(){
                    document.onmouseover = null;
                    document.onmouseup = null;
                }
        	}
        }
       
	</script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

面向对象的拖拽

<!DOCTYPE html>
<html>
<head>
	<title>拖拽</title>
	<style type="text/css">
        #div1{
        	width: 100px;
        	height: 100px;
        	background: red;
        	position: absolute;
        }
	</style>
	<script type="text/javascript">
        window.onload = function() {
        	var a = new t();
        }
        function t() {
        	var _this = this;
        	this.div = document.getElementById('div1');
        	this.disX = 0;
            this.disY = 0;
            
        	this.div.onmousedown = function() {
        		
        		_this.mDown();
        	}
        }
        t.prototype.mDown = function (ev) {  
               var _this = this;
               var oEvent = ev||event;
               this.disX = oEvent.clientX - this.div.offsetLeft;
               this.disY = oEvent.clientY - this.div.offsetTop;
               document.onmouseover = function() {
               	   _this.mOver();
               }
               document.onmouseup = function(){
                   _this.mUp();
               };
        }
        t.prototype.mOver=function  (ev){
        	var oEvent = ev||event;
            this.div.style.left = oEvent.clientX - this.disX + 'px';
            this.div.style.top = oEvent.clientY - this.disY + 'px'; 
        }
        t.prototype.mUp = function() {
        	document.onmouseover = null;
            document.onmouseup = null;
        }
	</script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

注意点

  • 因为mouseover和mouseup是嵌套在mousedown里面的，所以需要在mousedown里面再去定义一次this，不然会报错"_this is not defeined"
  • document.onmouseove是针对整个网页的，所以不需要加上this
posted @ 2017-04-06 19:00  叫我小红依吧  阅读(104)  评论(0)  编辑  收藏  举报