快捷導(dǎo)航

Javascript簡(jiǎn)單實(shí)現(xiàn)可拖動(dòng)的div

更新時(shí)間：2013年10月22日 17:31:40 作者：

實(shí)現(xiàn)div拖動(dòng)有很多方法，不過目前比較常見的就是使用javascript實(shí)現(xiàn)的了，下面有個(gè)不錯(cuò)的示例，大家可以嘗試操作下

 
<html> 
<head> 
<script type="text/javascript"> 
var x; 
var y; 
function $(id) 
{ 
return document.getElementById(id) 
} 
function mousedown() 
{ 
x=event.clientX-$("px").style.pixelLeft; 
y=event.clientY-$("px").style.pixelTop; 
$("px").style.border="2px solid red"; 
$("px").onmousemove = mousemove; 
} 
function mouseup() 
{ 
$("px").onmousemove = ""; 
$("px").style.border=""; 
} 
function mousemove() 
{ 
$("px").style.pixelLeft=event.clientX-x; 
$("px").style.pixelTop=event.clientY-y; 
} 
</script> 
</head> 
<body> 
<div id="px" style="position:absolute; left:100px; height:100px; width:100px; background-color:#FF0;" 
onmousedown="mousedown()" onmouseup="mouseup()" > 
</div> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

Javascript 阿拉伯?dāng)?shù)字轉(zhuǎn)化中國(guó)大寫數(shù)字的函數(shù)代碼
將阿拉伯?dāng)?shù)字轉(zhuǎn)化中國(guó)大寫數(shù)字的函數(shù)代碼，需要的朋友可以參考下。
2010-04-04
淺談Webpack 持久化緩存實(shí)踐
這篇文章主要介紹了淺談Webpack 持久化緩存實(shí)踐,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-03-03
JavaScript實(shí)現(xiàn)移動(dòng)小精靈的案例代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)移動(dòng)小精靈的案例代碼,本文分步驟給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-12-12
js鏈表操作(實(shí)例講解)
下面小編就為大家?guī)硪黄猨s鏈表操作(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
教你用幾十行js實(shí)現(xiàn)很炫的canvas交互特效
HTML5中的大部分動(dòng)畫都是通過Canvas實(shí)現(xiàn),因?yàn)镃anvas就像一塊畫布,我們可以通過調(diào)用腳本在Canvas上繪制任意形狀,甚至是制作動(dòng)畫,這篇文章主要給大家介紹了關(guān)于用幾十行js實(shí)現(xiàn)很炫的canvas交互特效的相關(guān)資料,需要的朋友可以參考下
2021-11-11
chorme 瀏覽器記住密碼后input黃色背景處理方法(兩種)
使用chrome瀏覽器選擇記住密碼的賬號(hào)，輸入框會(huì)自動(dòng)加上黃色的背景，有些設(shè)計(jì)輸入框是透明背景的，需要去除掉這個(gè)黃色的背景。下面給大家分享chorme 瀏覽器記住密碼后input黃色背景處理方法，一起看看吧
2017-11-11
原生js實(shí)現(xiàn)autocomplete插件
這篇文章主要介紹了原生js實(shí)現(xiàn)autocomplete插件的相關(guān)資料,需要的朋友可以參考下
2016-04-04
H5+C3+JS實(shí)現(xiàn)五子棋游戲（AI篇）
這篇文章主要為大家詳細(xì)介紹了H5+C3+JS實(shí)現(xiàn)五子棋游戲AI篇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-09-09
這篇文章主要介紹了使用原生JS實(shí)現(xiàn)火鍋點(diǎn)餐小程序（面向?qū)ο笏枷耄?在這里小程序使用的是es6開發(fā)標(biāo)準(zhǔn)，本文通過代碼展示，截圖的形式給大家介紹，需要的朋友可以參考下
2019-12-12