快捷導(dǎo)航

Javascript簡單實現(xiàn)可拖動的div

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

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

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