本文實例講述了JavaScript使用面向對象實現的拖拽功能。分享給大家供大家參考,具體如下:
面向對象有個前提:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>面向對象的繼承-1</title> <style> #div1 {width: 100px; height: 100px; background: red; position: absolute;} </style> <script> window.onload = function() { var oDiv = document.getElementById('div1'); oDiv.onmousedown = function(ev) { var ev = ev || event; var disX = ev.clientX - this.offsetLeft; var disY = ev.clientY - this.offsetTop; document.onmousemove = function(ev) { var ev = ev || event; oDiv.style.left = ev.clientX - disX + 'px'; oDiv.style.top = ev.clientY - disY + 'px'; } document.onmouseup = function() { document.onmousemove = document.onmouseup = null; } } } </script> </head> <body> <div id="div1"></div> </body> </html>
當前文章:JavaScript使用面向對象實現的拖拽功能詳解-創新互聯
轉載注明:http://www.yijiale78.com/article46/cdiseg.html
成都網站建設公司_創新互聯,為您提供移動網站建設、搜索引擎優化、定制網站、微信公眾號、網站制作、網站改版
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯