JS實現(xiàn)超簡單的鼠標(biāo)拖動效果
本文實例講述了JS實現(xiàn)超簡單的鼠標(biāo)拖動效果。分享給大家供大家參考,具體如下:
這里使用盡可能短的JavaScript代碼寫一個JS拖動,函數(shù)本身287個字符。。。如果不是考慮兼容性和變量封裝,還可以更短點。
運行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/js-s-drug-demo/
具體代碼如下:
<title>盡可能短的寫一個JS拖動</title> <body> <div id="demo" style="width:100px; height:100px; position:absolute; background-color:silver;"></div> <script> function dragable(id){var d=document,o=d.getElementById(id),s=o.style,x,y,p='onmousemove';o.onmousedown=function(e){e=e||event;x=e.clientX-o.offsetLeft;y=e.clientY-o.offsetTop;d[p]=function(e){e=e||event;s.left=e.clientX-x+'px';s.top=e.clientY-y+'px'};d.onmouseup=function(){d[p]=null}}} dragable("demo"); </script>
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
- JS響應(yīng)鼠標(biāo)點擊實現(xiàn)兩個滑塊區(qū)間拖動效果
- JS實現(xiàn)左右拖動改變內(nèi)容顯示區(qū)域大小的方法
- js實現(xiàn)div拖動動畫運行軌跡效果代碼分享
- avalon js實現(xiàn)仿微博拖動圖片排序
- JS實現(xiàn)彈出浮動窗口(支持鼠標(biāo)拖動和關(guān)閉)實例詳解
- JS實現(xiàn)動態(tài)移動層及拖動浮層關(guān)閉的方法
- JS實現(xiàn)可縮放、拖動、關(guān)閉和最小化的浮動窗口完整實例
- js用拖動滑塊來控制圖片大小的方法
- Js可拖拽放大的層拖動特效實現(xiàn)方法
- JS+CSS實現(xiàn)可拖動的彈出提示框
- js實現(xiàn)圖片拖動改變順序附圖
- JS實現(xiàn)的自定義網(wǎng)頁拖動類
相關(guān)文章
js 實現(xiàn) list轉(zhuǎn)換成tree的方法示例(數(shù)組到樹)
這篇文章主要介紹了js 實現(xiàn) list轉(zhuǎn)換成tree的方法示例(數(shù)組到樹),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08JavaScript hasOwnProperty() 函數(shù)實例詳解
hasOwnProperty()函數(shù)用于指示一個對象自身(不包括原型鏈)是否具有指定名稱的屬性。下面通過本文給大家分享JavaScript hasOwnProperty() 函數(shù)實例講解,感興趣的朋友一起看看吧2017-08-08Javascript 獲取字符串字節(jié)數(shù)的多種方法
Javascript 字符串字節(jié)數(shù)獲取功能多種方法2009-06-06淺析AMD CMD CommonJS規(guī)范--javascript模塊化加載學(xué)習(xí)心得總結(jié)
下面小編就為大家分享一篇淺析AMD CMD CommonJS規(guī)范--javascript模塊化加載學(xué)習(xí)心得總結(jié)。小編覺得寫的非常不錯,需要的朋友可以過來參考一下2016-03-03