99热6,香蕉在线精品视频在线观看2,久久国产免费一区

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

亚州一级-亚州视频在线-亚州视频一区二区-亚州视频一区-亚州三级视频-亚州三级