Javascript簡單實現(xiàn)可拖動的div
更新時間:2013年10月22日 17:31:40 作者:
實現(xiàn)div拖動有很多方法,不過目前比較常見的就是使用javascript實現(xiàn)的了,下面有個不錯的示例,大家可以嘗試操作下
復(fù)制代碼 代碼如下:
<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>
您可能感興趣的文章:
- javascript html5 canvas實現(xiàn)可拖動省份的中國地圖
- JS+CSS實現(xiàn)可拖動的彈出提示框
- js實現(xiàn)可拖動DIV的方法
- 原生JS可拖動彈窗效果實例代碼
- html+javascript實現(xiàn)可拖動可提交的彈出層對話框效果
- js實現(xiàn)完美拖拽效果可拖動層與回放拖動規(guī)跡并顯示拖動距離參數(shù)
- js 可拖動列表實現(xiàn)代碼
- javascript div 彈出可拖動窗口
- javascript之可拖動的iframe效果代碼
- js實現(xiàn)當復(fù)選框選擇匿名登錄時隱藏登錄框效果
- 原生js實現(xiàn)可拖動的登錄框效果
相關(guān)文章
使用濾鏡設(shè)置透明導(dǎo)致 IE 6/7/8/9 解析異常的解決方法
使用濾鏡設(shè)置透明導(dǎo)致 IE 6/7/8/9 解析異常的解決方法,需要的朋友可以參考下。2011-04-04為Javascript中的String對象添加去除左右空格的方法(示例代碼)
這篇文章主要介紹了為Javascript中的String對象添加去除左右空格的方法(示例代碼)。需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11QQ跳轉(zhuǎn)支付寶并自動領(lǐng)紅包腳本(最新)
這篇文章主要給大家分享介紹了一個QQ跳轉(zhuǎn)支付寶并自動領(lǐng)紅包腳本,這個腳本應(yīng)該是最新的,測試后是可以使用的,文中給出了完整的示例代碼和使用方法,需要的朋友可以參考借鑒,下面隨著小編來一起學習學習吧2018-06-06JavaScript ES6的新特性使用新方法定義Class
這篇文章主要介紹了JavaScript ES6的新特性使用新方法定義Class 的相關(guān)資料,需要的朋友可以參考下2016-06-06