在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)文章
javascript動(dòng)態(tài)加載實(shí)現(xiàn)方法一
這兩天，沒(méi)什么太多的事情，好吧，我承認(rèn)，是我這兩天不想做公司的項(xiàng)目，因?yàn)槲彝话l(fā)奇想，其實(shí)也不算突發(fā)奇想，算是對(duì)以前的想法的實(shí)現(xiàn)，就是把JS當(dāng)做Java來(lái)寫(xiě)2012-08-08
Bootstrap Fileinput 4.4.7文件上傳實(shí)例詳解
這篇文章主要為大家詳細(xì)介紹了Bootstrap Fileinput 4.4.7文件上傳實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
在web開(kāi)發(fā)中，防止表單的重復(fù)提交是一個(gè)非常重要的環(huán)節(jié)。重復(fù)提交會(huì)導(dǎo)致數(shù)據(jù)混亂，甚至可能導(dǎo)致系統(tǒng)崩潰，今天我們將帶領(lǐng)大家從小白級(jí)別到大神級(jí)別的程序員，一起來(lái)學(xué)習(xí)如何在實(shí)際項(xiàng)目中避免表單的重復(fù)提交2023-04-04
本文主要介紹了Webpack中的文件指紋的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
bootstrap table實(shí)現(xiàn)合并單元格效果
這篇文章主要為大家詳細(xì)介紹了bootstrap table實(shí)現(xiàn)合并單元格效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了JS簡(jiǎn)單隨機(jī)數(shù)生成方法,通過(guò)javascript自定義函數(shù)演示了隨機(jī)數(shù)的生成方法,需要的朋友可以參考下2016-09-09
兼容IE與firefox火狐的回車(chē)事件(js與jquery)
今天看了網(wǎng)上的朋友說(shuō)了，很多網(wǎng)站提供的回車(chē)事件代碼都是不兼容firefox的，其實(shí)腳本之家提供的代碼，一直以來(lái)都是盡量的兼容多瀏覽器。2010-10-10
JS實(shí)用案例之輸入智能提示(打字機(jī)輸出效果)
最近在項(xiàng)目需求中遇到之前沒(méi)有做過(guò)的功能,下面這篇文章主要給大家介紹了關(guān)于JS實(shí)用案例之輸入智能提示,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),打字機(jī)輸出效果的相關(guān)資料,需要的朋友可以參考下2023-01-01
從階乘函數(shù)對(duì)比Javascript和C#的異同
今天學(xué)習(xí)Javascript函數(shù)，發(fā)現(xiàn)這完全是一個(gè)神奇的東西。跟我們平常所見(jiàn)強(qiáng)類(lèi)型語(yǔ)言中的函數(shù)有好多不同。下面我們就從C#和JavaScript的兩個(gè)計(jì)算階乘的函數(shù)中比較兩者的異同2012-05-05
這篇文章主要介紹了JavaScript中奇葩的假值應(yīng)用,需要的朋友可以參考下2014-03-03