提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

在html页面上拖放移动标签

HTML 页面 标签 移动 拖放
2023-06-13 09:14:15 时间
1、设置标签（如img,div等等）的样式：将position设置为absolute，例如：
<divstyle="position:absolute"id="move_id"onmousedown="mousedown()"onmouseup="mouseup()">
2、用一个临时元素来记录标签的状态。将临时元素的display设置为none，隐藏这个临时元素，这里使用了input扮演临时元素。值为0表示这个标签没有被移动过。当你的鼠标在这个标签上按下的时候，它的值被设置为1，表示准备拖放和移动。
<inputtype="text"style="display:none"id="temp_id"value="0">
3、象下面一样设置<body>:
<bodyonmousemove="mousemove();">
4、最后看下JavaScript函数了：
代码
复制代码代码如下:

<scriptlanguage="javascript"type="text/javascript">
functionmousedown()
{
document.getElementById("temp_id").value="1";

}
functionmouseup()
{
document.getElementById("temp_id").value="0";
document.getElementById("move_id").style.cursor="default";
}
functionmousemove()
{
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>

相关文章