最简单的拖动层

转载 2007年09月26日 00:03:00
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
<title>最简单的拖动层</title>
</head>
<body>
    
<div id="f" style="position: absolute; width: 500px; height: 350px; background-color: #ccc;
        top: 150px; left: 200px; z-index: 101; border: solid 1px blue;"
>
        
<div id="title" style="background-color: Blue; cursor: move; height: 20px; color: #fff;
            font-size: 13px; padding-top: 5px; padding-left: 10px;"
>
            最简单的拖动层
        
</div>
    
</div>

    
<script type="text/javascript">
var posX;
var posY;        
fdiv 
= document.getElementById("f");            

document.getElementById(
"title").onmousedown=function(e)
{
    
if(!e) e = window.event;            
    posX 
= e.clientX - parseInt(fdiv.style.left);
    posY 
= e.clientY - parseInt(fdiv.style.top);
    document.onmousemove 
= mousemove;            
}


document.onmouseup 
= function()
{
    document.onmousemove 
= null;
}

function mousemove(ev)
{
    
if(ev==null) ev = window.event;
    fdiv.style.left 
= (ev.clientX - posX) + "px"
    fdiv.style.top 
= ev.clientY - posY + "px";
}

    
</script>

</body>
</html>
 

相关文章推荐

HTML DIV 层拖动简单实现

WebForm8 var iNodeX; var iNodeY;...

as3用鼠标拖动图形拼图——灰常简单的教程

话说这种效果在课件里面经常用到,鼠标拖动事件,一个运用很频繁的事件,一起学习学习吧 首先SWF贡献给大家看看效果 感觉咋样,原理其实还蛮简单的,做做试试吧 下面来看看源码吧 ...

简单的实现js拖动元素

  • 2013-11-22 16:38
  • 45KB
  • 下载

jquery简单的拖动效果

简单拖曵原理实例 #drag{width:400px;height:300px;background:url(http://upload.yxgz.cn/uploadfile/2009/...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)