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 οnclick="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.οnmοusedοwn=function(){
		this.allowDragDropFlag=true;
		L.downPoint.x=L.getPos().offsetX;
		L.downPoint.y=L.getPos().offsetY;
	};
	object.οnmοuseup=function(){
		this.allowDragDropFlag=false;
		if(global.endDrag){
			global.endDrag();
		}
	};
	object.οnmοusemοve=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.οnmοusedοwn=function(){
	};
	object.οnmοuseup=function(){
	};
	object.οnmοusemοve=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.οnmοusedοwn=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.οnmοusemοve=function(){
		if(global.allowMoveFlag){
			document.getElementById("line_"+global.id).setAttribute("to",(L.getPos().realX-2)+","+(L.getPos().realY-2));
		}
	};
	object.οnmοuseup=function(){
		global.allowMoveFlag=false;
		document.title=global.id;
	};
	return global;
};


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值