在html頁面上拖放移動標簽
更新時間：2010年01月08日 22:34:45 作者：
在html頁面上拖放移動標簽，需要的朋友可以參考下。
1、設置標簽（如img, div等等）的樣式：將position設置為absolute，例如：
<div style="position:absolute" id="move_id" onmousedown="mousedown()" onmouseup="mouseup()">
2、用一個臨時元素來記錄標簽的狀態(tài) 。將臨時元素的display設置為none ，隱藏這個臨時元素，這里使用了input 扮演臨時元素。值為0表示這個標簽沒有被移動過。當你的鼠標在這個標簽上按下的時候，它的值被設置為1，表示準備拖放和移動。
<input type="text" style="display:none" id="temp_id" value="0">
3、象下面一樣設置 <body> :
<body onmousemove="mousemove();">
4、最后看下JavaScript函數了：
代碼
<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、用一個臨時元素來記錄標簽的狀態(tài) 。將臨時元素的display設置為none ，隱藏這個臨時元素，這里使用了input 扮演臨時元素。值為0表示這個標簽沒有被移動過。當你的鼠標在這個標簽上按下的時候，它的值被設置為1，表示準備拖放和移動。
<input type="text" style="display:none" id="temp_id" value="0">
3、象下面一樣設置 <body> :
<body onmousemove="mousemove();">
4、最后看下JavaScript函數了：
代碼
復制代碼 代碼如下:
<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>
相關文章
這兩天，沒什么太多的事情，好吧，我承認，是我這兩天不想做公司的項目，因為我突發(fā)奇想，其實也不算突發(fā)奇想，算是對以前的想法的實現，就是把JS當做Java來寫2012-08-08
Bootstrap Fileinput 4.4.7文件上傳實例詳解
這篇文章主要為大家詳細介紹了Bootstrap Fileinput 4.4.7文件上傳實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
在web開發(fā)中，防止表單的重復提交是一個非常重要的環(huán)節(jié)。重復提交會導致數據混亂，甚至可能導致系統(tǒng)崩潰，今天我們將帶領大家從小白級別到大神級別的程序員，一起來學習如何在實際項目中避免表單的重復提交2023-04-04
本文主要介紹了Webpack中的文件指紋的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
這篇文章主要為大家詳細介紹了bootstrap table實現合并單元格效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了JS簡單隨機數生成方法,通過javascript自定義函數演示了隨機數的生成方法,需要的朋友可以參考下2016-09-09
兼容IE與firefox火狐的回車事件(js與jquery)
今天看了網上的朋友說了，很多網站提供的回車事件代碼都是不兼容firefox的，其實腳本之家提供的代碼，一直以來都是盡量的兼容多瀏覽器。2010-10-10
最近在項目需求中遇到之前沒有做過的功能,下面這篇文章主要給大家介紹了關于JS實用案例之輸入智能提示,文中通過實例代碼介紹的非常詳細,打字機輸出效果的相關資料,需要的朋友可以參考下2023-01-01
今天學習Javascript函數，發(fā)現這完全是一個神奇的東西。跟我們平常所見強類型語言中的函數有好多不同。下面我們就從C#和JavaScript的兩個計算階乘的函數中比較兩者的異同2012-05-05
這篇文章主要介紹了JavaScript中奇葩的假值應用,需要的朋友可以參考下2014-03-03