在html頁面上拖放移動標(biāo)簽
更新時間：2010年01月08日 22:34:45 作者：
在html頁面上拖放移動標(biāo)簽，需要的朋友可以參考下。
1、設(shè)置標(biāo)簽（如img, div等等）的樣式：將position設(shè)置為absolute，例如：
<div style="position:absolute" id="move_id" onmousedown="mousedown()" onmouseup="mouseup()">
2、用一個臨時元素來記錄標(biāo)簽的狀態(tài) 。將臨時元素的display設(shè)置為none ，隱藏這個臨時元素，這里使用了input 扮演臨時元素。值為0表示這個標(biāo)簽沒有被移動過。當(dāng)你的鼠標(biāo)在這個標(biāo)簽上按下的時候，它的值被設(shè)置為1，表示準備拖放和移動。
<input type="text" style="display:none" id="temp_id" value="0">
3、象下面一樣設(shè)置 <body> :
<body onmousemove="mousemove();">
4、最后看下JavaScript函數(shù)了：
代碼
<script language="javascript" type="text/javascript">
function mousedown()
{
document.getElementById("temp_id").value = "1";
}
function mouseup()
{
document.getElementById("temp_id").value = "0";
document.getElementById("move_id").style.cursor = "default";
}
function mousemove()
{
if (document.getElementById("temp_id").value == "1")
{
document.getElementById("move_id").style.top = event.clientY - 10;
document.getElementById("move_id").style.left = event.clientX - 50;
document.getElementById("move_id").style.cursor = "move";
}
}
</script>
<div style="position:absolute" id="move_id" onmousedown="mousedown()" onmouseup="mouseup()">
2、用一個臨時元素來記錄標(biāo)簽的狀態(tài) 。將臨時元素的display設(shè)置為none ，隱藏這個臨時元素，這里使用了input 扮演臨時元素。值為0表示這個標(biāo)簽沒有被移動過。當(dāng)你的鼠標(biāo)在這個標(biāo)簽上按下的時候，它的值被設(shè)置為1，表示準備拖放和移動。
<input type="text" style="display:none" id="temp_id" value="0">
3、象下面一樣設(shè)置 <body> :
<body onmousemove="mousemove();">
4、最后看下JavaScript函數(shù)了：
代碼
復(fù)制代碼 代碼如下:
<script language="javascript" type="text/javascript">
function mousedown()
{
document.getElementById("temp_id").value = "1";
}
function mouseup()
{
document.getElementById("temp_id").value = "0";
document.getElementById("move_id").style.cursor = "default";
}
function mousemove()
{
if (document.getElementById("temp_id").value == "1")
{
document.getElementById("move_id").style.top = event.clientY - 10;
document.getElementById("move_id").style.left = event.clientX - 50;
document.getElementById("move_id").style.cursor = "move";
}
}
</script>
相關(guān)文章
這篇文章主要為大家詳細介紹了原生js模擬購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
javascript手風(fēng)琴下拉菜單實現(xiàn)代碼
手風(fēng)琴效果的下拉菜單大家都有見到過吧，實現(xiàn)的方法也有很多，這篇文章就為大家分享了javascript手風(fēng)琴下拉菜單實現(xiàn)代碼，純手寫的，感興趣的朋友不要錯過。2015-11-11
createElement和onclick...2006-11-11
JS中confirm,alert,prompt函數(shù)區(qū)別分析
JS中confirm,alert,prompt函數(shù)使用區(qū)別有哪些呢？2011-01-01
這篇文章主要為大家詳細介紹了使用js實現(xiàn)動態(tài)背景，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了js實現(xiàn)文章文字大小字號功能的實現(xiàn)方法,可根據(jù)用戶習(xí)慣調(diào)整顯示文字的大小.詳細講述了實現(xiàn)這一功能的完整步驟.是非常實用的技巧,需要的朋友可以參考下2014-11-11
js檢測標(biāo)題與描述中的關(guān)鍵詞發(fā)現(xiàn)就替換或跳轉(zhuǎn)到別的頁面
這篇文章主要介紹了js檢測標(biāo)題與描述中的關(guān)鍵詞發(fā)現(xiàn)就替換或跳轉(zhuǎn)到別的頁面的實現(xiàn)方法，主要是分享它的編程思路與加密方法2021-06-06
下面小編就為大家?guī)硪黄P(guān)于JS中二維數(shù)組的聲明方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要介紹了bootstrap讀書筆記之CSS組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要為大家詳細介紹了js實現(xiàn)雙色球效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08