最简单的拖动层

转载 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>
 

Jquery拖动层效果,简单实用

  • 2016年08月08日 15:30
  • 145KB
  • 下载

javascript 实现的层拖动简单实例

  • 2008年09月27日 12:49
  • 19KB
  • 下载

天易13----jquery实现简单的可拖动的弹出层效果

一:图片预览 1)层默认是隐藏的,当点击“点击”按钮时会出现效果 2)在此之前分别倒入jquery-1.4.4.min.js和jquery.easydrag.handler.beta2.js(用于...

jQuery拖动任意层-调用简单

  • 2010年05月12日 10:53
  • 22KB
  • 下载

HTML DIV 层拖动简单实现

WebForm8 var iNodeX; var iNodeY;...

jquery实现简单图片的拖动

  • 2017年07月10日 02:17
  • 30KB
  • 下载

Android 简单实现可全屏拖动,可点击的View

首先,我们都知道,拖动一个view,需要给它设置touchListener,或者重写他的touchEvent。我们以ImageView为例,自定义一个DragView,继承ImageView。 单纯...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:最简单的拖动层
举报原因:
原因补充:

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