色婷婷综合久久久久久,懂色一区二区三区免费观看,亚洲专区一区

- 龍誠動態(tài)
 
 行業(yè)新聞
 
 我們的觀點
 
 公司公告
 
 建站技術
 
 網站SEO優(yōu)化
 
 網站制作流程
 
 產品報價
 - 聯(lián)系電話：0577-55882408
 - 傳真號碼：0577-55882411
 - 聯(lián)系手機：15224122065
 - 聯(lián)系地址：溫州市甌海站南商貿城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="scqeemu" class="dp-highlighter"> <div id="gymaog0" class="bar"> <div id="4gikw0o" 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方法即可。

久久精品一二三区_欧美一区网站_亚洲制服av_国产欧美日韩另类一区_成人av综合网_碰碰在线视频_欧美精品在欧美一区二区少妇_免费观看亚洲_青青一区二区三区_国产传媒一区二区