js 如何实现弹出层拖动效果

可能重复的问题
求纯javascript实现一个拖拽效果的程序

我页面里有个div标签,

  
<div id="msgLayer" style="display:none"></div>

这个标签内容是动态生成的主要是用来实现弹出层效果,比如登录弹出层或其他提示用户的弹出层。我想实现当用户鼠标按住弹出层时可以任意拖动弹出层直到放开鼠标,js如何实现这样的效果呢?

该问题已经在2012-03-15被关闭

参与关闭投票者: 张海峰 , Geo5

关闭原因:与其他问题完全重复

评论 (1)链接2012-03-14 
  • 0 支持
    现在的弹出层应用非常广泛了,一些插件都非常好用,给你推荐两个 tipswindow,wbox。 – 冯义军 2012-03-14
该答案已被锁定,无法对其进行评论,编辑及投票。
()
评论 (0)链接 • 2012-03-14
  
<!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>
该答案已被锁定,无法对其进行评论,编辑及投票。
()
评论 (0)链接 • 2012-03-15

分享给你一段代码吧,方式为rDrag.init(obj),obj是div对象。

  
var rDrag = {
o:null,
init:function(o){
o.onmousedown = this.start;
},
start:function(e){
var o;
e = rDrag.fixEvent(e);
e.preventDefault && e.preventDefault();
rDrag.o = o = this;
o.x = e.clientX - rDrag.o.offsetLeft;
o.y = e.clientY - rDrag.o.offsetTop;
document.onmousemove = rDrag.move;
document.onmouseup = rDrag.end;
},
move:function(e){
e = rDrag.fixEvent(e);
var oLeft,oTop;
oLeft = e.clientX - rDrag.o.x;
oTop = e.clientY - rDrag.o.y;
rDrag.o.style.left = oLeft + 'px';
rDrag.o.style.top = oTop + 'px';
},
end:function(e){
e = rDrag.fixEvent(e);
rDrag.o = document.onmousemove = document.onmouseup = null;
},
fixEvent: function(e){
if (!e) {
e = window.event;
e.target = e.srcElement;
e.layerX = e.offsetX;
e.layerY = e.offsetY;
}
return e;
}
}
该答案已被锁定,无法对其进行评论,编辑及投票。
()
评论 (1)链接 • 2012-03-15
  • 0 支持
    为什么我使用这段Js之后弹出层上面的输入框都无法输入了呢? – 追风的虎 2013-08-16
德问是一个专业的编程问答社区,请 登录注册 后再提交答案