JS實(shí)現(xiàn)超簡單的鼠標(biāo)拖動效果
本文實(shí)例講述了JS實(shí)現(xiàn)超簡單的鼠標(biāo)拖動效果。分享給大家供大家參考,具體如下:
這里使用盡可能短的JavaScript代碼寫一個(gè)JS拖動,函數(shù)本身287個(gè)字符。。。如果不是考慮兼容性和變量封裝,還可以更短點(diǎn)。
運(yùn)行效果截圖如下:

在線演示地址如下:
http://demo.jb51.net/js/2015/js-s-drug-demo/
具體代碼如下:
<title>盡可能短的寫一個(gè)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è)計(jì)有所幫助。
- JS響應(yīng)鼠標(biāo)點(diǎn)擊實(shí)現(xiàn)兩個(gè)滑塊區(qū)間拖動效果
- JS實(shí)現(xiàn)左右拖動改變內(nèi)容顯示區(qū)域大小的方法
- js實(shí)現(xiàn)div拖動動畫運(yùn)行軌跡效果代碼分享
- avalon js實(shí)現(xiàn)仿微博拖動圖片排序
- JS實(shí)現(xiàn)彈出浮動窗口(支持鼠標(biāo)拖動和關(guān)閉)實(shí)例詳解
- JS實(shí)現(xiàn)動態(tài)移動層及拖動浮層關(guān)閉的方法
- JS實(shí)現(xiàn)可縮放、拖動、關(guān)閉和最小化的浮動窗口完整實(shí)例
- js用拖動滑塊來控制圖片大小的方法
- Js可拖拽放大的層拖動特效實(shí)現(xiàn)方法
- JS+CSS實(shí)現(xiàn)可拖動的彈出提示框
- js實(shí)現(xiàn)圖片拖動改變順序附圖
- JS實(shí)現(xiàn)的自定義網(wǎng)頁拖動類
相關(guān)文章
js 實(shí)現(xiàn) list轉(zhuǎn)換成tree的方法示例(數(shù)組到樹)
這篇文章主要介紹了js 實(shí)現(xiàn) list轉(zhuǎn)換成tree的方法示例(數(shù)組到樹),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
JavaScript hasOwnProperty() 函數(shù)實(shí)例詳解
hasOwnProperty()函數(shù)用于指示一個(gè)對象自身(不包括原型鏈)是否具有指定名稱的屬性。下面通過本文給大家分享JavaScript hasOwnProperty() 函數(shù)實(shí)例講解,感興趣的朋友一起看看吧2017-08-08
Javascript 獲取字符串字節(jié)數(shù)的多種方法
Javascript 字符串字節(jié)數(shù)獲取功能多種方法2009-06-06
js倒計(jì)時(shí)簡單實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了js倒計(jì)時(shí)簡單實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08
淺析AMD CMD CommonJS規(guī)范--javascript模塊化加載學(xué)習(xí)心得總結(jié)
下面小編就為大家分享一篇淺析AMD CMD CommonJS規(guī)范--javascript模塊化加載學(xué)習(xí)心得總結(jié)。小編覺得寫的非常不錯(cuò),需要的朋友可以過來參考一下2016-03-03
JQuery+DIV自定義滾動條樣式的具體實(shí)現(xiàn)
用DIV和DIV自身的滾動條相互控制內(nèi)容的滾動,DIV自身的滾動條樣式可以用DIV層覆蓋,重寫滾動條樣式2013-06-06

