久久精品人人做人人看_午夜福利免费视频一区二区_最新aⅴ无码视频在线播放_最新aⅴ无码视频在线播放

- 龍誠動態(tài)
 
 行業(yè)新聞
 
 我們的觀點
 
 公司公告
 
 建站技術
 
 網(wǎng)站SEO優(yōu)化
 
 網(wǎng)站制作流程
 
 產(chǎn)品報價
 - 聯(lián)系電話：0577-55882408
 - 傳真號碼：0577-55882411
 - 聯(lián)系手機：15224122065
 - 聯(lián)系地址：溫州市甌海站南商貿(mào)城C幢306
- - 首頁-新聞中心-建站技術
 模仿《javascript權威指南》寫了個簡易拖拽程序，麻雀雖小五臟俱全。 原理：注冊mousemove事件，使元素跟隨鼠標挪動；注冊mouseup事件，移除mousemove事件，使得松開鼠標時元素不再跟隨移動，能夠固定在指定位置。在mousedown事件中注冊mousemove事件和mouseup事件，這樣便可完成一次完整的拖拽。 重點：IE中setCapture()的應用。它的作用是捕捉所有的MouseEvent，設置完成后，即使鼠標移出窗口注冊的鼠標事件仍然能夠被觸發(fā)。它在此處的作用是當鼠標移動過快越出元素的邊界使得原本將要失效的mousemove事件依然能夠發(fā)揮作用。在ff和chrome中，由于沒有對應的設置，可以把mousemove和mouseup事件指定到docuemnt對象上，這樣不管鼠標怎么移動，都在document上；其實在ie上這么寫也行，那就不用設置setCapture()了，它和設置了的相比唯一的區(qū)別是當元素向右移出窗口邊界時，元素始終保持在可視范圍內。 <div id="i22vknx" class="dp-highlighter"> <div id="2afoggq" class="bar"> <div id="rzvo7jf" class="tools">Js代碼 <a title="復制代碼" ><img alt="復制代碼" 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簡易拖拽效果" 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> 當然此例還可以擴展，比如限定拖拽范圍不允許移動到可視范圍外等，只要修改mousemove方法即可。

久久无码视频高清_亚洲中文字幕%20久久久_九九九热在线视频_国产色A∨在线看免费