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;
};