VML,L.js

Page.jsp
<%@ page language="java" pageEncoding="UTF-8"  contentType="text/html;charset:UTF-8"%>
<HTML xmlns:v>
	<head>
		<title></title>
	</head>
<%
	String path=request.getContextPath();
%>
<style type="text/css">
v\:*{behavior:url(#default#VML)};
</style>
<body onclick="new L.line(this)">
</body>
</HTML>
<script type="text/javascript" src="<%=path%>/js/L.js"></script>
<script type="text/javascript">
</script>

L.js

var L={
		version:"v 0.01 beta",
		author:"lovingshu",
		seed:0
};
L.allowDragDropFlag=false;
L.downPoint={};
L.getValue=function(val,defaultValue){
	if(typeof val=="undefined"){
		return defaultValue;
	}
	return val;
};
L.getIdentifier=function(){
	return "L_"+(L.seed++);
};
//获取各种坐标
L.getPos=function(){
	var pos={};
	with(event){
		pos.clientX=clientX;
		pos.clientY=clientY;
		pos.screenX=screenX;
		pos.screenY=screenY;
		pos.offsetX=offsetX;
		pos.offsetY=offsetY;
		L.scrTop=document.documentElement.scrollTop|document.body.scrollTop;
		L.scrLeft=document.documentElement.scrollLeft|document.body.scrollLeft;
		//获取在有滚动条的情况下的真实坐标
		pos.realX=pos.clientX+L.scrLeft;
		pos.realY=pos.clientY+L.scrTop;
		pos.x=x;
		pos.y=y;
	}
	return pos;
};
L.get=function(){
	
};
//设定可以移动的元素(其中object为DOM对象)
L.allowDragDrop=function(object,config){
	if(!object) return null;
	var global=this;
	if(config){
		global.endDrag=L.getValue(config.endDrag,null);
		global.draging=L.getValue(config.draging,null);
	}
	object.onmousedown=function(){
		this.allowDragDropFlag=true;
		L.downPoint.x=L.getPos().offsetX;
		L.downPoint.y=L.getPos().offsetY;
	};
	object.onmouseup=function(){
		this.allowDragDropFlag=false;
		if(global.endDrag){
			global.endDrag();
		}
	};
	object.onmousemove=function(){
		if(this.allowDragDropFlag){
			with(object.style){
				position="absolute";
				left=(L.getPos().realX-L.downPoint.x);
				top=(L.getPos().realY-L.downPoint.y);
			}
			if(global.draging){
				global.draging();
			}
		}
	};
	return global;
};
//禁止元素拖动
L.disallowDragDrop=function(object){
	object.onmousedown=function(){
	};
	object.onmouseup=function(){
	};
	object.onmousemove=function(e){
	};
}
//画线
L.line=function(object,config){
	if(!object) return null;
	var global=this;
	this.allowMoveFlag=false;
	this.id=L.getIdentifier();
	object.onselectstart=function(){
		return false;
	};
	object.onmousedown=function(){
		global.allowMoveFlag=true;
		object.innerHTML+="<v:line style='position:absolute;left:0px;top:0px;' id='line_"+global.id+"' from='"+L.getPos().realX+","+L.getPos().realY+"' to='"+L.getPos().realX+","+L.getPos().realY+"'><v:stroke id='stroke"+global.id+"' endArrow='classic'/></v:line>";
	};
	object.onmousemove=function(){
		if(global.allowMoveFlag){
			document.getElementById("line_"+global.id).setAttribute("to",(L.getPos().realX-2)+","+(L.getPos().realY-2));
		}
	};
	object.onmouseup=function(){
		global.allowMoveFlag=false;
		document.title=global.id;
	};
	return global;
};

VML,L.js_第1张图片

你可能感兴趣的:(VML,L.js)