JS實現(xiàn)超簡單的鼠標(biāo)拖動效果

更新時間：2015年11月02日 10:06:46 作者：企鵝

這篇文章主要介紹了JS實現(xiàn)超簡單的鼠標(biāo)拖動效果,涉及JavaScript響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了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è)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

JavaScript 格式化數(shù)字、金額、千分位、保留幾位小數(shù)、舍入舍去
這篇文章主要介紹了JavaScript 格式化數(shù)字、金額、千分位、保留幾位小數(shù)、舍入舍去，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07
JS實現(xiàn)網(wǎng)頁端猜數(shù)字小游戲
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)網(wǎng)頁端猜數(shù)字小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-03-03
Javascript獲取標(biāo)簽ID改變style屬性的代碼
下面的這段代碼中，我們通過select元素的name屬性來設(shè)置具體要訪問style的哪個屬性（本例中為背景色），這樣，這個函數(shù)就可以用來設(shè)置不同的CSS屬性了
2012-08-08
momentjs獲取上周、上月、前三個月的起始和結(jié)束時間(附完整代碼)
這篇文章主要給大家介紹了關(guān)于momentjs獲取上周、上月、前三個月的起始和結(jié)束時間的相關(guān)資料,在需要你進(jìn)行日期處理的地方,必然少不了moment.js的使用,需要的朋友可以參考下
2023-07-07
chart.js實現(xiàn)動態(tài)網(wǎng)頁顯示拆線圖的效果
本文主要介紹了chart.js實現(xiàn)動態(tài)網(wǎng)頁顯示拆線圖的效果,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-11-11
js實現(xiàn)中文轉(zhuǎn)拼音的完整步驟記錄
這篇文章主要給大家介紹了關(guān)于js實現(xiàn)中文轉(zhuǎn)拼音的相關(guān)資料,主要利用了pinyin-pro包,可以完美的實現(xiàn)所需要的功能,需要的朋友可以參考下
2021-06-06
Typescript中extends關(guān)鍵字的基本使用
extends表示具體的泛型類型只能是object類型,某個變量如果能斷言成object類型[變量as object],那么這個變量的類型符合T extends object,下面這篇文章主要給大家介紹了關(guān)于Typescript中extends關(guān)鍵字基本使用的相關(guān)資料,需要的朋友可以參考下
2022-08-08
JavaScript獲取對象鍵名的五種方法
在 JavaScript 中,操作對象時獲取鍵名是高頻需求,不同場景下,我們需要篩選「自身/繼承屬性」「可枚舉/不可枚舉鍵」「字符串/Symbol 鍵」,本文將全面梳理 5 種核心方法的差異與適用場景,助你精準(zhǔn)選擇,需要的朋友可以參考下
2025-04-04
babel的使用及安裝配置教程
babel是一個廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)化為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。這篇文章主要介紹了babel的使用以及安裝配置,需要的朋友可以參考下
2018-02-02
原生js實現(xiàn)移動小球（碰撞檢測）
這篇文章主要介紹了原生js實現(xiàn)會動的小球，碰撞檢測功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12