html5 canvas平移
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>jsdiv浮动层拖拽效果代码-站长素材</title>
<scripttype="text/javascript">
functionDrag()
{
//初始化
this.initialize.apply(this,arguments)
}
Drag.prototype={
//初始化
initialize:function(drag,options)
{
this.drag=this.$(drag);
this._x=this._y=0;
this._moveDrag=this.bind(this,this.moveDrag);
this._stopDrag=this.bind(this,this.stopDrag);
this.setOptions(options);
this.handle=this.$(this.options.handle);
this.maxContainer=this.$(this.options.maxContainer);
this.maxTop=Math.max(this.maxContainer.clientHeight,this.maxContainer.scrollHeight)-this.drag.offsetHeight;
this.maxLeft=Math.max(this.maxContainer.clientWidth,this.maxContainer.scrollWidth)-this.drag.offsetWidth;
this.limit=this.options.limit;
this.lockX=this.options.lockX;
this.lockY=this.options.lockY;
this.lock=this.options.lock;
this.onStart=this.options.onStart;
this.onMove=this.options.onMove;
this.onStop=this.options.onStop;
this.handle.style.cursor="move";
this.changeLayout();
this.addHandler(this.handle,"mousedown",this.bind(this,this.startDrag))
},
changeLayout:function()
{
this.drag.style.top=this.drag.offsetTop+"px";
this.drag.style.left=this.drag.offsetLeft+"px";
this.drag.style.position="absolute";
this.drag.style.margin="0"
},
startDrag:function(event)
{
varevent=event||window.event;
this._x=event.clientX-this.drag.offsetLeft;
this._y=event.clientY-this.drag.offsetTop;
this.addHandler(document,"mousemove",this._moveDrag);
this.addHandler(document,"mouseup",this._stopDrag);
event.preventDefault&&event.preventDefault();
this.handle.setCapture&&this.handle.setCapture();
this.onStart()
},
moveDrag:function(event)
{
varevent=event||window.event;
variTop=event.clientY-this._y;
variLeft=event.clientX-this._x;
if(this.lock)return;
this.limit&&(iTop<0&&(iTop=0),iLeft<0&&(iLeft=0),iTop>this.maxTop&&(iTop=this.maxTop),iLeft>this.maxLeft&&(iLeft=this.maxLeft));
this.lockY||(this.drag.style.top=iTop+"px");
this.lockX||(this.drag.style.left=iLeft+"px");
event.preventDefault&&event.preventDefault();
this.onMove()
},
stopDrag:function()
{
this.removeHandler(document,"mousemove",this._moveDrag);
this.removeHandler(document,"mouseup",this._stopDrag);
this.handle.releaseCapture&&this.handle.releaseCapture();
this.onStop()
},
//参数设置
setOptions:function(options)
{
this.options=
{
handle:this.drag,//事件对象
limit:true,//锁定范围
lock:false,//锁定位置
lockX:false,//锁定水平位置
lockY:false,//锁定垂直位置
maxContainer:document.documentElement||document.body,//指定限制容器
onStart:function(){},//开始时回调函数
onMove:function(){},//拖拽时回调函数
onStop:function(){}//停止时回调函数
};
for(varpinoptions)this.options[p]=options[p]
},
//获取id
$:function(id)
{
returntypeofid==="string"?document.getElementById(id):id
},
//添加绑定事件
addHandler:function(oElement,sEventType,fnHandler)
{
returnoElement.addEventListener?oElement.addEventListener(sEventType,fnHandler,false):oElement.attachEvent("on"+sEventType,fnHandler)
},
//删除绑定事件
removeHandler:function(oElement,sEventType,fnHandler)
{
returnoElement.removeEventListener?oElement.removeEventListener(sEventType,fnHandler,false):oElement.detachEvent("on"+sEventType,fnHandler)
},
//绑定事件到对象
bind:function(object,fnHandler)
{
returnfunction()
{
returnfnHandler.apply(object,arguments)
}
}
};
//应用
window.onload=function()
{
varoBox=document.getElementById("box");
varoTitle=document.getElementById("canvas");
varoDrag=newDrag(oBox,{handle:oTitle,limit:false});
varaInput=document.getElementsByTagName("input");
};
</script>
</head>
<body>
<divid="box"style="background:lightblue;padding:5px;margin:50px;border:1pxsolid#f60;">
<canvasid="canvas"width="4000"height="300">
</canvas>
</div>
</body>
</html>
相关推荐
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...