Contoh dalam artikel ini menerangkan kaedah melaksanakan kesan seret lapisan seret modul iGoogleDivDrag dalam js. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut: Salin kod Kod adalah seperti berikut: js实现iGoogle Div Drag 模块拖动 层拖动效果 <br> *{margin:0px; padding:0px;}<br> body{position:relative; width:780px; height:800px; border:1px solid red}<br> .drag{width:200px; height:100px; border:1px solid #000;margin:20px; background:#fff}<br> .drag h1{margin:0px; padding:0px; font-size:12px; height:18px; line-height:18px; background:#E0E7F3; text-indent:20px;cursor:move;}<br> .center{ margin:200px; border:3px solid red}<br> www.baidu.com www.163.com www.jb51.net 测试二 测试三 测试四 测试五 <br> /*<br> Pengarang : popper.w<br> Versi : v2.0<br> */<br> var DragZindexNumber=0;<br> seret fungsi(obj){<br> var ox,oy,ex,xy,tag=0,mask=0;<br> jika(tag==0){<br> obj.onmousedown=function(e)<br> { <br> if(topeng ==1){return; }<br> obj.style.zIndex=DragZindexNumber ;<br> transp(obj,"mulakan")<br> tag=1;<br> var e = e||window.event; <br> ex=getEventOffset(e).offsetX;<br> ey=getEventOffset(e).offsetY;<br> ox=parseInt(obj.offsetLeft);<br> oy=parseInt(obj.offsetTop);<br> tempDiv=document.createElement("div"); <br> dengan(tempDiv.style)<br> {<br> width=obj.offsetWidth "px";<br> height=obj.offsetHeight "px";<br> border="1px bertitik merah";<br> position="absolute";<br> left=obj.offsetLeft "px";<br> top=obj.offsetTop "px";<br> zIndex=999;<br> }<br> document.body.appendChild(tempDiv);<br> this.ele=tempDiv;<br> fDragStart(tempDiv);<br> document.body.onmousemove=function(e){<br> jika(tag==1)<br> { <br> var e=e||window.event;<br> tempDiv.style.left=parseInt(e.clientX)-ex "px";<br> tempDiv.style.top=parseInt(e.clientY)-ey "px";<br> }<br> else{if(!tempDiv==null)tempDiv.parentNode.removeChild(tempDiv)}<br> }<br> tempDiv.onmouseup=function(e)<br> {<br> var e=e||window.event;<br> fDragEnd(tempDiv);<br> obj.style.position="absolute";<br> movie(obj,parseInt(e.clientX)-ex-19,parseInt(e.clientY)-ey-20);<br> tempDiv.parentNode.removeChild(tempDiv);<br> tag=0;<br> }<br> }<br> }<br> }<br> filem fungsi(o,l,t){<br> var a=1;<br> topeng=1;<br> var ol=parseInt(o.offsetLeft);<br> var ot=parseInt(o.offsetTop);<br> var iTimer=setInterval(function(){<br> jika(a==10)<br> {<br> transp(o,"end");<br> topeng=0;<br> clearInterval(iTimer);<br> }<br> o.style.left=ol a*(l-ol)/10 "px";<br> o.style.top=ot a*(t-ot)/10 "px";<br> a ;<br> },20);<br> }<br> fungsi fCancleBubble(e)<br> {<br> var e = window.event || e;<br> jika (e.preventDefault) e.preventDefault();<br> else e.returnValue = palsu;<br> }<br> fungsi transp(o,mod){<br> if(mode=="start"){<br> jika(dokumen.semua){<br> o.style.filter = "Alpha(Opacity=50)";<br> }lain{<br> o.style.opacity = 0.5;<br> }<br> }<br> lain {<br> jika(dokumen.semua){<br> o.style.filter = "Alpha(Opacity=100)";<br> }lain{<br> o.style.opacity = 1;<br> }<br> }<br> }<br> fungsi getOffset(evt)<br> {<br> var target = evt.target;<br> if (target.offsetLeft == undefined)<br> {<br> sasaran = target.parentNode;<br> }<br> var pageCoord = getPageCoord(sasaran);<br> var eventCoord =<br> {<br> x: window.pageXOffset evt.clientX,<br> y: window.pageYOffset evt.clientY<br> };<br> var offset =<br> {<br> offsetX: eventCoord.x - pageCoord.x,<br> offsetY: eventCoord.y - pageCoord.y<br> };<br> mengimbangi kembali;<br> }<br> fungsi getPageCoord(elemen)<br> {<br> var coordinat = {x: 0, y: 0};<br> manakala (elemen)<br> {<br> coord.x = element.offsetLeft;<br> coord.y = element.offsetTop;<br> elemen = elemen.offsetParent;<br> }<br> return coordinat;<br> }<br> fungsi getEventOffset(evt)<br> {<br> var msg = "";<br> jika (evt.offsetX == tidak ditentukan)<br> {<br> var evtOffsets = getOffset(evt);<br> msg={offsetX:evtOffsets.offsetX,offsetY:evtOffsets.offsetY};<br> }<br> lain<br> {<br> msg={offsetX:evt.offsetX,offsetY:evt.offsetY};<br> }<br> kembalikan mesej;<br> }<br> fungsi fDragStart(XEle)<br> {<br> suis(fCkBrs())<br> {<br> kes 3:<br> window.getSelection().removeAllRanges();<br> rehat;<br> <br>lalai:<br> XEle.setCapture();<br> Rehat;<br> }<br> }<br> fungsi fDragEnd(XEle)<br> {<br> suis(fCkBrs())<br> {<br> kes 3:<br> window.getSelection().removeAllRanges();<br> Rehat;<br> <br> lalai:<br> XEle.releaseCapture();<br> Rehat;<br> }<br> }<br> fungsi fCkBrs()<br> {<br> suis (navigator.appName)<br> {<br> kes 'Opera': kembali 2;<br> kes 'Netscape': kembali 3;<br> lalai: pulangkan 1;<br> }<br> } <br> var element=document.getElementsByTagName("div");<br> untuk(var i=0;i<elemen.length;i ){<br /> if(elemen[i].className=="drag"){<br /> seret(elemen[i])}<br /> <br /> }<br /> </skrip></div> <p>Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang. </p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
