javascript 拖动模拟回收站(有小BUG,已经修改)

最新推荐文章于 2024-11-29 09:16:29 发布

原创最新推荐文章于 2024-11-29 09:16:29 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #input #function #div #class #xhtml

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个简单的网页交互示例，通过HTML和JavaScript实现拖拽不同颜色的方块到指定区域（回收站），并判断是否成功放入。涉及基本的DOM操作、鼠标事件监听及位置计算。

忙了半天,在最后把JS放地单独的文件里,压缩后不记得备份,源码就是现在这样了.看不懂了.

<!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> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .drag { position: absolute; left: 400px; top: 100px; background-color: blue; height: 80px; width: 80px; cursor: pointer; } </style> <mce:script type="text/javascript" src="archko-recyle.js" mce_src="archko-recyle.js"></mce:script> </head> <body style="background-color:white" mce_style="background-color:white"> <div> lastMouseX:<input id="lmx" type="text"/><br/> lastMouseY:<input id="lmy" type="text"/><br/> </div> <div id="r" style="position:absolute;left:350px; top:100px; background-color:red; height:80px; width:80px;cursor:pointer;"> <div id='txt1'></div> </div> <div id="g" style="position:absolute; left:450px; top:100px; background-color:green; height:80px; width:80px;cursor:pointer;"> <div id='txt2'></div> </div> <div id="b" style="position:absolute; left:550px; top:100px; background-color:blue; height:80px; width:80px;cursor:pointer;"></div> <div> <div id="pic1" class="pic1"> icon1 </div> <div id="pic2" class="pic2"> icon2 </div> <div id="recycle" class="recycle" onmouseover="highlight();" onmouseout="deletehightlight();" style="position:absolute; left:500px; top:300px; background-color:yellow; height:120px; width:120px;cursor:pointer;"> 我是回收站 </div> 拖动块的高:<input type="text" id="dragW"/><br/> 拖动块的宽:<input type="text" id="dragH"/><br/> 拖动块的X坐标:dragLeft<input type="text" id="dragX"/><br/> 拖动块的Y坐标:dragTop<input type="text" id="dragY"/><br/> 拖动块的右边框X坐标:dragRight<input type="text" id="dragRightX"/><br/> 拖动块的下边框Y坐标:dragBottom<input type="text" id="dragBottomY"/><br/> 回收站的高:<input type="text" id="recyleW"/><br/> 回收站的宽:<input type="text" id="recyleH"/><br/> 回收站的X坐标:recyleLeft<input type="text" id="recyleX"/><br/> 回收站的Y坐标:recyleTop<input type="text" id="recyleY"/><br/> 回收站右边框X坐标:recyleRight<input type="text" id="recyleRightX"/><br/> 回收站下边框Y坐标:recyleBottom<input type="text" id="recyleBottomY"/><br/> 拖动块是否进入回收站范围:<input type="text" id="b"/><br/> </div> </body> </html> <mce:script type="text/javascript"></mce:script>

下面是JS文件

/* * Compressed by JSA(www.xidea.org) */ eval(function(_,J,C,$,K,L,F,I){function E($){return $<62?String.fromCharCode($+=$<26?65:$<52?71:-4):$<63?"_":$<64?"$":E($>>6)+E($&63)}while(C>0)L[E($--)]=J[--C];function H($){return L[$]==F[$]?$:L[$]}if("".replace(/^/,String)){var G=_.match(K),D=G[0],A=_.split(K),B=0;if(_.indexOf(A[0]))A=[""].concat(A);do{I[C++]=A[B++];I[C++]=H(D)}while(D=G[B]);I[C++]=A[B]||"";return I.join("")}return _.replace(K,H)}("S R=10000;s O(O){P(typeof O==/"string/")h u.getElementById(O);h false}s Z(N,A,O){U.version=/"M.L/";U.pubDate=/"2009-06-10/";U.BH=N;U.BJ=A;U.config={mask:O}}Z.3.init=s(){U.K=O(U.BJ);U.K.onmousedown=U.BD;U.K.c.j=R};S t=z=m=5=4=8=w=9=L;Z.3.BD=s(){S N=v();U.7=N.p;U.6=N.o;U.BI=a;U.1=BA;R=U.c.j=R+M;P(/X/J.V(y.x))U.setCapture();W P(/q/J.V(y.x))g.captureEvents(e.0|e.n);O(/"dragW/").d=r(U.c.f);O(/"dragH/").d=r(U.c.i);O(/"recyleW/").d=r(O(/"l/").c.f);O(/"recyleH/").d=r(O(/"l/").c.i);4=r(O(/"l/").offsetLeft);8=4+r(O(/"l/").offsetWidth);w=r(O(/"l/").offsetTop);9=w+O(/"l/").offsetHeight;O(/"recyleX/").d=4;O(/"recyleY/").d=8;O(/"recyleRightX/").d=w;O(/"recyleBottomY/").d=9};s a(){S F=v(),N=F.p-U.7,B=F.o-U.6,H=r(U.c.Y)+N+/"Q/",I=r(U.c.T)+B+/"Q/";U.c.Y=H;U.c.T=I;U.7=F.p;U.6=F.o;t=r(H);m=r(I);z=t+r(H);5=m+r(I);S E=(4<t)&&(t<8),D=(4<z)&&(z<8),G=(w<m)&&(m<9),C=(w<5)&&(5<9),A=(E||D)&&(G||C);P(A){2();U.1=s(){P(/X/J.V(y.x))U._();W P(/q/J.V(y.x))g.BE(e.0|e.n);S O=g.confirm(/"delete it?/");P(O)U.c.display=/"none/"};O(/"BC/").d=/"//u662f/"}W{BG();O(/"BC/").d=/"//u5426/"}O(/"dragX/").d=t;O(/"dragY/").d=m;O(/"dragRightX/").d=z;O(/"dragBottomY/").d=5}s BA(){P(/X/J.V(y.x))U._();W P(/q/J.V(y.x))g.BE(e.0|e.n);U.BI=b;U.1=b}s createDiv(){S O=u.createElement(/"div/");O.setAttribute(/"BH/",/"recyle/");O.c.$=/"k/";O.c.border=/"1px solid #567893/";O.c.position=/"absolute/";O.c.Y=BF+/"Q/";O.c.T=200+/"Q/";O.c.f=400+/"Q/";O.c.i=BF+/"Q/";O.c.lineHeight=/"25px/";O.c.j=/"10001/";u.body.appendChild(O);h O}s v(){h g.event||BB.callee.caller.BB[L]}s 2(){O(/"l/").c.$=/"#517/"}s BG(){O(/"l/").c.$=/"k/"}","i|o|0|1|_|$|if|px|zi|var|top|this|test|else|msie|left|drag|move|null|style|value|Event|width|window|return|height|zIndex|yellow|recycle|dragTop|MOUSEUP|clientY|clientX|firefox|parseInt|function|dragLeft|document|getEvent|recyleTop|userAgent|navigator|dragRight|MOUSEMOVE|onmouseup|highlight|prototype|recyleLeft|dragBottom|lastMouseY|lastMouseX|recyleRight|recyleBottom|releaseCapture|backgroundColor|up|arguments|lmx|down|releaseEvents|300|deletehightlight|id|onmousemove|dragid".split("|"),65,73,/[/w/$]+/g,{},{},[]))

可以看看,效果也好.日后再有兴趣了再修改.记录一下.