跨浏览器可8方向拖拽剪裁框

enix2212

浏览: 25718 次
性别:
来自: 北京

最近访客更多访客>>

sp42

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javaScript

javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
* { padding:0; margin:0; }
body { overflow: hidden; height:800px; }
#clipArea { width :100px; height:100px; border: dashed 1px #ccc; position: absolute; cursor:move;}
#clipArea b { position:absolute; height:6px; width:6px; overflow:hidden; display:block; background:#FFF; border: 1px solid #000; background:#eee; }
#canvasContainer { height:400px; width:600px; border:solid 1px red; position:relative; overflow:hidden; right: 20px; float: right; margin-right: 20px; top: 100px; }
</style>
</head>

<body>
<div id="canvasWrapper">
	<div id="canvasContainer"></div>
</div>
<script type="text/javascript">
void function(e,g){var f,d,c,a,h;f=document;a=f.getElementsByTagName("body")[0];h=f.getElementById("canvasContainer");d=function(){var i=arguments.callee;i.prototype={type:({}).toString,slice:([]).slice,is:function(j){return this.type.call(j).slice(8,-1)},each:function(l,o){var k,m=0,j=l.length,n=j===g&&({}).toString.call(l).slice(8,-1)==="Object";if(n){for(k in l){if(o.call(l[k],k,l[k])===false){break}}}else{for(;m<j;){if(o.call(l[m],m,l[m++])===false){break}}}},toArray:function(j){return this.slice.call(j)},getHtmlElement:function(j){!this.element&&(this.element={});!this.element[j]&&(this.element[j]=f.createElement(j));return this.element[j].cloneNode(true)},getEvent:function(j){return j||e.event},getTarget:function(j){return j.srcElement||j.target},stopEvent:function(j){j=this.getEvent(j);(j.returnValue||j.preventDefault)&&(j.returnValue=false||j.preventDefault());(j.cancelBubble||j.stopPropagation)&&(j.cancelBubble=false||j.stopPropagation())},getClinetRect:function(j){var l=j.getBoundingClientRect(),k=(k={left:l.left,right:l.right,top:l.top,bottom:l.bottom,height:(l.height?l.height:(l.bottom-l.top)),width:(l.width?l.width:(l.right-l.left))});return k},addEvent:function(n,m,l,k){var j=arguments.callee;n.attachEvent&&(j=function(q,p,o){q.attachEvent("on"+p,o)}).apply(this,arguments);n.addEventListener&&(j=function(q,p,o){q.addEventListener(p,o,k||false)}).apply(this,arguments);n["on"+m]&&(j=function(q,p,o){q["on"+p]=function(){o()}}).apply(this,arguments)},removeEvent:function(n,m,l,k){var j=arguments.callee;n.detachEvent&&(j=function(q,p,o){q.detachEvent("on"+p,o)}).apply(this,arguments);n.removeEventListener&&(j=function(q,p,o){q.removeEventListener(p,o,k||false)}).apply(this,arguments);n["on"+m]&&(j=function(q,p,o){q["on"+p]=null}).apply(this,arguments)},currentStyle:function(k,l){var j=null;return g!==k.currentStyle?k.currentStyle[l]:document.defaultView.getComputedStyle(k,null)[l]}};if(e===this||"indicator" in this){return new i}}();var b=function(){var i=arguments.callee,j=d,l=this,k=6,m=null;if(!l instanceof i){return new i()}m={TL:{css:"top:0;left:0;cursor:nw-resize",size:function(n){m.CL.size(n);m.TC.size(n)}},TC:{css:"top:0;left:48%;cursor:n-resize",size:function(n){l.correctY(l.hanlderInfo._down-n.clientY,l.hanlderInfo._mxTH);l.correctTop()}},TR:{css:"right:0;top:0;cursor:ne-resize",size:function(n){m.CR.size(n);m.TC.size(n)}},CL:{css:"top:48%;left:0;cursor:w-resize",size:function(n){l.correctX(l.hanlderInfo._right-n.clientX,l.hanlderInfo._mxLW);l.correctLeft()}},CR:{css:"top:48%;right:0px;cursor:e-resize",size:function(n){l.correctX(n.clientX-l.hanlderInfo._left,l.hanlderInfo._mxRW)}},BL:{css:"bottom:0;left:0;cursor:sw-resize",size:function(n){m.CL.size(n);m.BC.size(n)}},BC:{css:"bottom:0;left:48%;cursor:s-resize",size:function(n){l.correctY(n.clientY-l.hanlderInfo._top,l.hanlderInfo._mxDH)}},BR:{css:"bottom:0;right:0px;cursor:se-resize",size:function(n){m.CR.size(n);m.BC.size(n)}}};l.area=null;!l.activity&&(i.prototype.constructor=i),i.fn=i.prototype,i.fn.constructor=i;i.fn.activity=function(){var o=null,n=[];l.data&&(l.Data=null);if(l.area===null){l.area=j.getHtmlElement("div");l.area.style.visibility="hidden";l.area.id="clipArea";h.appendChild(l.area);n=["TL","TC","TR","CL","CR","BL","BC","BR"];j.each(Array(8),function(q,p){o=j.getHtmlElement("b");o.id=n[q];o.fn=m[n[q]];j.addEvent(o,"mousedown",l.mousemoveCheckThreshold,false);l.area.appendChild(o);l.setHanldPosition(o,l.area,n[q])});j.addEvent(l.area,"mousedown",l.mousemoveCheckThreshold,false);l.area.style.visibility="visible"}};i.fn.setHanldPosition=function(u,n,t){var o=n.offsetWidth,w=n.offsetHeight,r=(o-k),q=Math.floor((o-k)/2),v=(w-k),s=Math.floor((o-k)/2);u.style.cssText=m[t].css};i.fn.mousemoveCheckThreshold=function(p){p=j.getEvent(p);var o=j.getTarget(p),q=[],n=p.type;while(o&&o.nodeType!==1){o=o.parentNode}({mousedown:function(r){r=j.getEvent(r);j.stopEvent(r);f.currentTarget=o;l.pos=j.getClinetRect(o);l.origin=[r.clientX-l.pos.left,r.clientY-l.pos.top];o.nodeName.toLowerCase()==="b"&&l.checkHandler(r);j.addEvent(f,"mouseup",l.mousemoveCheckThreshold,false);j.addEvent(f,"mousemove",l.mousemoveCheckThreshold,false)},mousemove:function(s){s=j.getEvent(s);var r=f.currentTarget,t=j.getClinetRect(r.parentNode);r.nodeName.toLowerCase()==="b"?l.handlerMove.call(r,s,t):l.areaMove.call(r,s,t);j.stopEvent(s)},mouseup:function(s){s=j.getEvent(s);var r=j.getTarget(s);if(r.nodeName.toLowerCase()!=="b"){try{r.style.cursor="move"}catch(s){}}j.removeEvent(f,"mousemove",l.mousemoveCheckThreshold,false);j.removeEvent(f,"mouseup",l.mousemoveCheckThreshold,false);l.pos=l.origin=null;delete l.hanlderInfo;j.stopEvent(s)}})[p.type](p)};i.fn.checkHandler=function(q){q=j.getEvent(q);var p=j.getTarget(q),n=p.parentNode,o=j.getClinetRect(n);!l.hanlderInfo&&(l.hanlderInfo={});l.hanlderInfo.mxT=0;l.hanlderInfo.mxL=0;l.hanlderInfo.mxR=n.parentNode.clientWidth;l.hanlderInfo.mxB=n.parentNode.clientHeight;l.hanlderInfo.mxR=Math.max(l.hanlderInfo.mxR,l.hanlderInfo.mxL+40);l.hanlderInfo.mxB=Math.max(l.hanlderInfo.mxB,l.hanlderInfo.mxT+40);l.hanlderInfo.width=n.clientWidth;l.hanlderInfo.height=n.clientHeight;l.hanlderInfo.left=n.offsetLeft;l.hanlderInfo.top=n.offsetTop;l.hanlderInfo._left=o.left;l.hanlderInfo._right=o.right;l.hanlderInfo._top=o.top;l.hanlderInfo._down=o.bottom;l.hanlderInfo._fixLeft=l.hanlderInfo.width+l.hanlderInfo.left;l.hanlderInfo._fixTop=l.hanlderInfo.height+l.hanlderInfo.top;l.hanlderInfo._mxRW=l.hanlderInfo.mxR-l.hanlderInfo.left;l.hanlderInfo._mxDH=l.hanlderInfo.mxB-l.hanlderInfo.top;l.hanlderInfo._mxTH=Math.max(l.hanlderInfo._fixTop-l.hanlderInfo.mxT,0);l.hanlderInfo._mxLW=Math.max(l.hanlderInfo._fixLeft-l.hanlderInfo.mxL,0)};i.fn.correctX=function(n,o){n=l.correctWidth(n,o);l.hanlderInfo.width=n};i.fn.correctY=function(n,o){n=l.correctHeight(n,o);l.hanlderInfo.height=n};i.fn.correctWidth=function(n,o){n=Math.min(o,n);n=Math.max(n,80,0);return n};i.fn.correctHeight=function(n,o){n=Math.min(o,n);n=Math.max(n,80,0);return n};i.fn.correctTop=function(){l.hanlderInfo.top=l.hanlderInfo._fixTop-l.hanlderInfo.height};i.fn.correctLeft=function(){l.hanlderInfo.left=l.hanlderInfo._fixLeft-l.hanlderInfo.width};i.fn.handlerMove=function(n){n=j.getEvent(n);var o=this.id;this.fn.size(n);l.resize();j.stopEvent(n)};i.fn.resize=function(n){var o=l.area;o.style.cssText="width:"+l.hanlderInfo.width+"px;height:"+l.hanlderInfo.height+"px;top:"+l.hanlderInfo.top+"px;left:"+l.hanlderInfo.left+"px"},i.fn.areaMove=function(p){var q=[p.clientX,p.clientY],n=this.parentNode,r,o=j.getClinetRect(n);r=[Math.max(p.clientX-o.left-l.origin[0],0),Math.max(p.clientY-o.top-l.origin[1],0)];r=[Math.min(n.clientWidth-this.offsetWidth,r[0]),Math.min(n.clientHeight-this.offsetHeight,r[1])];this.style.top=r[1]+"px";this.style.left=r[0]+"px"};i.fn.removeArea=function(){try{l.area.parentNode.removeChild(l.area),l.area=null}catch(n){}};i.fn.getData=function(){var n=j.getClinetRect(l.area.parentNode);return l.area?j.getClinetRect(l.area):-1}};new b().activity()}(window);
</script>
</body>
</html>

clip.zip (2.8 KB)
下载次数: 43

分享到：

Another JavaScript quiz | 选项卡

2011-08-15 20:01
浏览 1007
评论(1)
论坛回复 / 浏览 (0 / 1538)
分类:Web前端
查看更多

1 楼梧栖凤 2011-08-18

得把未经处理的脚本分享出来啊！

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

跨浏览器可8方向拖拽剪裁框

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

跨浏览器可8方向拖拽剪裁框

评论

发表评论

相关推荐

[javascript]9宫格拖拽拼图游戏 puzzle

避免悲剧 密码生成器

jQuery创建实例与原型继承揭秘

[Javascript]单例模式（singleton ）

javascript1.7新语法

javascript undo redo

duffsDevice 高速版

ECMAScript.js2

仅限正整数输入

Another JavaScript quiz

选项卡

scroll base

拖拽排序列表单例

Animate Baseclass

很棒的时间线控件

fade方法

核心只要两行即可实现添加或移除className

让函数有记忆能力

可以跳动的手风琴 Accordion

javascript new 关键字的运行原理

最近访客更多访客>>

避免悲剧密码生成器