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