js实现的拖动功能

最新推荐文章于 2024-10-18 17:23:02 发布

wlbing0625

最新推荐文章于 2024-10-18 17:23:02 发布

阅读量803

点赞数

分类专栏： js 文章标签： function constructor html null java div

本文链接：https://blog.csdn.net/wlbing0625/article/details/7676933

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/eventUtil.js"></script>
</head>
<body>
 <div id="status"  className="draggable" style="position:absolute;border:1px solid;width:100px;height:100px;background:red" ></div>
    <script type="text/javascript">
    function EventTarget(){
        this.handlers={};	//函数处理器数组
      }
      EventTarget.prototype={
      	constructor:EventTarget,//手动指定constructor为EventTarget
      	addHandler:function(type,handler){//添加一个事件处理器
      		if(typeof this.handlers[type] == "undefined"){
      			this.handlers[type]=[];
      		}
      		this.handlers[type].push(handler);
      	},
      	fire:function(event){//触发事件
      		if(!event.target){
      			event.target=this;
      		}
      		if(this.handlers[event.type] instanceof Array){
      			var handlers=this.handlers[event.type];
      			for(var i=0,len=handlers.length;i<len;i++){
      				handlers[i](event);
      			}
      		}
      	},
      	removeHandler:function(type,handler){//删除事件处理器
      		if(this.handlers[type] instanceof Array){
      		var handlers=this.handlers[type];
      		for(var i=0,len=handlers.length;i<len;i++){
      			if(handlers[i]===handler){
      				break;
      			}
      		}
      		handlers.splice(i,1);//删除指定的handler处理器
      		}
      	}
      }
      
      
        var DragDrop=function(){
        	var dragdrop=new EventTarget();
        	var dragging=null;
        	var diffX=0;
        	var diffY=0;
        	function handleEvent(event){
        		event=EventUtil.getEvent(event);
        		var target=EventUtil.getTarget(event);
        		switch(event.type){
        		case "mousedown":
        			if(target.className.indexOf("draggable")){
        				dragging=target;
        				diffX=event.clientX-target.offsetLeft;
        				diffY=event.clientY-target.offsetTop;
        				dragdrop.fire({type:"dragstart",target:dragging,x:event.clientX,y:event.clientY});
        			}
        				break;
        		case "mouseover":
        			if(dragging!=null){
        				 event=EventUtil.getEvent(event);
						 dragging.style.left=(event.clientX-diffX)+"px";
						 dragging.style.top=(event.clientY-diffY)+"px";
			        	 dragdrop.fire({type:"drag",target:dragging,x:event.clientX,y:event.clientY});
        			}
					break;
        		case "mouseup":
	        		dragdrop.fire({type:"dragend",target:dragging,x:event.clientX,y:event.clientY});
					dragging=null;
					break;
        		}
        	};
        	dragdrop.enable=function(){
        		EventUtil.addHandler(document, "mousedown", handleEvent);
        		EventUtil.addHandler(document, "mouseup", handleEvent);
        		EventUtil.addHandler(document, "mouseover", handleEvent);
        	};
        	dragdrop.disable=function(){
        		EventUtil.removeHandler(document, "mousedown", handleEvent);
        		EventUtil.removeHandler(document, "mouseup", handleEvent);
        		EventUtil.removeHandler(document, "mouseover", handleEvent);
        	};
        	return dragdrop;
        	
        }();
        
        DragDrop.addHandler("dragstart",function(event){
        	var status=document.getElementById("status");
        	status.innerHTML="start dragging "+event.target.id;
        });
        DragDrop.addHandler("drag",function(event){
        	var status=document.getElementById("status");
        	status.innerHTML="<br/> dragging "+event.target+" to ("+event.x+","+event.y+")";
        });
        DragDrop.addHandler("dragend",function(event){
        	var status=document.getElementById("status");
        	status.innerHTML="<br/> dragging "+event.target+" at ("+event.x+","+event.y+")";
        });
       DragDrop.enable();
    </script>
</body>
</html>