在html页面上拖放移动标签

最新推荐文章于 2024-09-28 17:32:53 发布

diejia1113

最新推荐文章于 2024-09-28 17:32:53 发布

阅读量243

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhuqil/archive/2010/01/07/1641565.html

版权

1、设置标签（如img, div等等）的样式：将position设置为absolute，例如：

< div style ="position:absolute" id ="move_id" onmousedown ="mousedown()" onmouseup ="mouseup()" >

2、用一个临时元素来记录标签的状态。将临时元素的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 >

（全文完）

以下为广告部分