亚洲啊v在线,国产精品一区二区羞羞答答,国产主播喷水一区二区

- 龍誠(chéng)動(dòng)態(tài)
 
 行業(yè)新聞
 
 我們的觀點(diǎn)
 
 公司公告
 
 建站技術(shù)
 
 網(wǎng)站SEO優(yōu)化
 
 網(wǎng)站制作流程
 
 產(chǎn)品報(bào)價(jià)
 - 聯(lián)系電話：0577-55882408
 - 傳真號(hào)碼：0577-55882411
 - 聯(lián)系手機(jī)：15224122065
 - 聯(lián)系地址：溫州市甌海站南商貿(mào)城C幢306
- - 首頁(yè)-新聞中心-建站技術(shù)
 模仿《javascript權(quán)威指南》寫了個(gè)簡(jiǎn)易拖拽程序，麻雀雖小五臟俱全。 原理：注冊(cè)mousemove事件，使元素跟隨鼠標(biāo)挪動(dòng)；注冊(cè)mouseup事件，移除mousemove事件，使得松開(kāi)鼠標(biāo)時(shí)元素不再跟隨移動(dòng)，能夠固定在指定位置。在mousedown事件中注冊(cè)mousemove事件和mouseup事件，這樣便可完成一次完整的拖拽。 重點(diǎn)：IE中setCapture()的應(yīng)用。它的作用是捕捉所有的MouseEvent，設(shè)置完成后，即使鼠標(biāo)移出窗口注冊(cè)的鼠標(biāo)事件仍然能夠被觸發(fā)。它在此處的作用是當(dāng)鼠標(biāo)移動(dòng)過(guò)快越出元素的邊界使得原本將要失效的mousemove事件依然能夠發(fā)揮作用。在ff和chrome中，由于沒(méi)有對(duì)應(yīng)的設(shè)置，可以把mousemove和mouseup事件指定到docuemnt對(duì)象上，這樣不管鼠標(biāo)怎么移動(dòng)，都在document上；其實(shí)在ie上這么寫也行，那就不用設(shè)置setCapture()了，它和設(shè)置了的相比唯一的區(qū)別是當(dāng)元素向右移出窗口邊界時(shí)，元素始終保持在可視范圍內(nèi)。 <div id="sssdlnr" class="dp-highlighter"> <div id="k3rxflt" class="bar"> <div id="81bkqwe" class="tools">Js代碼 <a title="復(fù)制代碼" ><img alt="復(fù)制代碼" src="http://hyj1254.iteye.com/images/icon_copy.gif" /></a> <a title="收藏這段代碼" href="javascript:void()"><img class="star" alt="收藏代碼" src="http://hyj1254.iteye.com/images/icon_star.png" /><img class="spinner" src="http://hyj1254.iteye.com/images/spinner.gif" style="display: none;" alt="" /></a></div> </div> <ol class="dp-c"> <li><!docType html> </li> <li><html> </li> <li><head> </li> <li><style type="text/css"> </li> <li>#drag {border:1px solid blue;width:100px;height:100px;position:absolute;} </li> <li></style> </li> <li></head> </li> <li><body> </li> <li><input id="x" /> </li> <li><input id="y" /> </li> <li><div id="drag"></div> </li> <li> </li> <li><script><!-- </li> <li>var drag = document.getElementById('drag'); </li> <li>var inputX = document.getElementById('x'); </li> <li>var inputY = document.getElementById('y'); </li> <li>if(document.attachEvent){ </li> <li>drag.attachEvent('onmousedown',dragHandle); </li> <li>}else{ </li> <li>drag.addEventListener('mousedown', dragHandle,false); </li> <li>} </li> <li>function dragHandle(event){ </li> <li> var event = event||window.event; </li> <li> var startX = drag.offsetLeft; </li> <li> var startY = drag.offsetTop; </li> <li> var mouseX = event.clientX; </li> <li> var mouseY = event.clientY; </li> <li> var deltaX = mouseX - startX; </li> <li> var deltaY = mouseY - startY; </li> <li> if(document.attachEvent){ </li> <li> drag.attachEvent('onmousemove',moveHandle); </li> <li> drag.attachEvent('onmouseup',upHandle); </li> <li> drag.attachEvent('onlosecapture',upHandle); </li> <li> drag.setCapture(); </li> <li> }else{ </li> <li> document.addEventListener('mousemove',moveHandle,true); </li> <li> document.addEventListener('mouseup',upHandle,true); </li> <li> } </li> <li> function moveHandle(event){ </li> <li> var event = event||window.event; </li> <li> drag.style.left = (event.clientX - deltaX)+"px"; </li> <li> drag.style.top = (event.clientY - deltaY)+"px"; </li> <li> inputX.value=drag.style.left; </li> <li> inputY.value=drag.style.top; </li> <li> } </li> <li> function upHandle(){ </li> <li> if(document.attachEvent){ </li> <li> drag.detachEvent('onmousemove',moveHandle); </li> <li> drag.detachEvent('onmouseup',upHandle); </li> <li> drag.detachEvent('onlosecapture',upHandle); </li> <li> drag.releaseCapture(); </li> <li> }else{ </li> <li> document.removeEventListener('mousemove',moveHandle,true); </li> <li> document.removeEventListener('mouseup',upHandle,true); </li> <li> } </li> <li> } </li> <li> </li> <li>} </li> <li>//--</script> </li> <li></body> </li> <li></html> </li> </ol> </div> <pre title="JS簡(jiǎn)易拖拽效果" class="js" name="code" pre_index="0" source_url="http://hyj1254.iteye.com/blog/1136895" codeable_type="Blog" codeable_id="1136895" style="display: none;"> <!docType html> <html> <head> <style type="text/css"> #drag {border:1px solid blue;width:100px;height:100px;position:absolute;} </style> </head> <body> <input id="x" /> <input id="y" /> <div id="drag"></div> <script><!-- var drag = document.getElementById('drag'); var inputX = document.getElementById('x'); var inputY = document.getElementById('y'); if(document.attachEvent){ drag.attachEvent('onmousedown',dragHandle); }else{ drag.addEventListener('mousedown', dragHandle,false); } function dragHandle(event){ var event = event||window.event; var startX = drag.offsetLeft; var startY = drag.offsetTop; var mouseX = event.clientX; var mouseY = event.clientY; var deltaX = mouseX - startX; var deltaY = mouseY - startY; if(document.attachEvent){ drag.attachEvent('onmousemove',moveHandle); drag.attachEvent('onmouseup',upHandle); drag.attachEvent('onlosecapture',upHandle); drag.setCapture(); }else{ document.addEventListener('mousemove',moveHandle,true); document.addEventListener('mouseup',upHandle,true); } function moveHandle(event){ var event = event||window.event; drag.style.left = (event.clientX - deltaX)+"px"; drag.style.top = (event.clientY - deltaY)+"px"; inputX.value=drag.style.left; inputY.value=drag.style.top; } function upHandle(){ if(document.attachEvent){ drag.detachEvent('onmousemove',moveHandle); drag.detachEvent('onmouseup',upHandle); drag.detachEvent('onlosecapture',upHandle); drag.releaseCapture(); }else{ document.removeEventListener('mousemove',moveHandle,true); document.removeEventListener('mouseup',upHandle,true); } } } //--</script> </body> </html> </pre> 當(dāng)然此例還可以擴(kuò)展，比如限定拖拽范圍不允許移動(dòng)到可視范圍外等，只要修改mousemove方法即可。