如何让可以拖动的div可以显示层与操作层分离
<html>
<head>
<meta charset="utf-8">
<title>鼠标拖动</title>
</head>
<script>
var drag_=false
var D=new Function('obj','return document.getElementById(obj);')
var oevent=new Function('e','if (!e) e = window.event;return e')
function Move_obj(obj){
var x,y;
D(obj).onmousedown=function(e){
drag_=true;
with(this){
style.position="absolute";var temp1=offsetLeft;var temp2=offsetTop;
x=oevent(e).clientX;y=oevent(e).clientY;
document.onmousemove=function(e){
if(!drag_)return false;
with(this){
style.left=temp1+oevent(e).clientX-x+"px";
style.top=temp2+oevent(e).clientY-y+"px";
}
}
}
document.onmouseup=new Function("drag_=false");
}
}
</script>
<body>
<div id="drag" style="background-color:#006;width:1366px;height:768px; background-color:#009" onmouseover='Move_obj("drag")'>
<img src="tp115117.png">
<img src="tp115117.png">
<img src="tp115117.png">
<img src="tp115117.png">
<img src="tp115117.png">
<img src="tp115117.png">
</div>
</body>
</html>
以上是我写的效果，现在的问题是，鼠标可以拖动div。但是如果鼠标拖动这个div里的图片的话。就实现不出来拖动div的效果了。鼠标拖动这个div里的图片的话，就会拖走图片，松开鼠标以后，才会拖动div，而且还是粘在鼠标上，这样的效果不是我想要的，我想要的效果是不管鼠标拖动div还是鼠标拖动这个div里的图片，都可以实现拖动的效果。求大神解答。
还有一个问题，就是我这个可以拖动的div宽高是1366*768的。我想让这个div拖动到边缘以后就不可以在继续往外拖动，不知道如何实现这样的效果？例如：这个div拖动到边缘以后，如果在继续拖动的话，就漏出div下面的网页的白色大背景了。我不想让网页的大背景漏出来，我想让这个可以拖动的div拖动到边缘以后就不可以在继续拖动了，求大神解决。 展开
===我是吐槽===
话说题主你能不能不要起这么高大上的标题？
你问的内容和 “显示层与操作层” 一毛钱关系都没有啊啊啊啊。。。
===吐槽完毕===
在正经讲解之前，我要先纠正你几个不好的习惯：
1、 尽量少用 with。虽然看起来节约了一些书写量，但是难以阅读（因为难以简单判断一个变量是全局的，还是属性）。而且容易带来不可预料的异常。因此像 google 的 closure 工具就要求不要使用 with。
2、我不知道你为啥要用 new Function 的方式。感觉比较别扭。完全可以直接用 function 啊。
3、你的代码逻辑里，每次在对象上按下鼠标时，都会绑定一次 document.onmousemove 事件。却从来都没有解绑过。因此如果你多次、反复拖动，我相信你会发现你的代码会有比较怪异的表现，或者至少是 CPU 占用变高。建议你在 onmouseup 时，解绑 onmousemove 事件。
开始正经答题：
图片会被莫名其妙的拖动，这是浏览器自身的行为（behavior）。因此只需要禁止这些行为就可以了。
修正后的代码如下（有详细注释，请仔细阅读）：
var D = function(obj) { return document.getElementById(obj); };
function Move_obj(obj){
D(obj).onmousedown=function(e){
// 获取 event 对象
e = e || window.event;
// 当前拖动的对象
var that = this;
// 设定 position 样式
that.style.position="absolute";
// 记录当前的坐标 - 事件发生的坐标
var x0 = that.offsetLeft - e.clientX;
var y0 = that.offsetTop - e.clientY;
// 绑定 onmousemove 事件
document.onmousemove = function(e){
e = e || window.event;
that.style.left = x0 + e.clientX + "px";
that.style.top = y0 + e.clientY + "px";
}
// 绑定 onmouseup 事件
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
// 阻止浏览器的默认行为
e.preventdefault && e.preventdefault();
e.stopPropagation && e.stopPropagation();
e.returnValue = false;
return false;
}
D(obj).onselectstart = D(obj).ondragstart = D(obj).ondrag = function(e){
e = e || window.event;
// 阻止浏览器的默认行为
e.preventdefault && e.preventdefault();
e.stopPropagation && e.stopPropagation();
e.returnValue = false;
return false;
}
}第二个问题，请另开一贴来问吧。
以上，请采纳，请给分。
大神，你的第三个意见，我应该如何解绑啊？onmousemove 事件啊？能否帮我修正一下可以不？你刚刚的回答我测试了，完全合格。另外第二个问题你会解答吗？你若会的话我就另开一帖，你在帮我解答
解绑的代码不就在我给你的代码里嘛，说了让你仔细阅读哦。。。
就是这句：
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};第二个问题我会答啊，不过我就是懒啊。。。难得打这么多字，很累的。。。
算了好人做到底，就在这里一起解答了吧。。。。
=====我是回答第二个问题的分割线======
如果要限制对象的移动范围，其实也很简单，在 document.onmousemove 这个事件里，会重新设置对象的位置。那么思路就很明确了，在设置新的位置前，检查一下有没有超出范围就可以了。代码是这样：
document.onmousemove = function(e){
e = e || window.event;
// 计算出新的位置坐标
var x = x0 + e.clientX;
var y = y0 + e.clientY;
// 判断位置是否超出范围
if (x < 0) x = 0;
else if (x > document.documentElement.offsetWidth - that.offsetWidth) x = document.documentElement.offsetWidth - that.offsetWidth;
if (y < 0) y = 0;
else if (y > document.documentElement.offsetHeight - that.offsetHeight) y = document.documentElement.offsetHeight - that.offsetHeight;
// 设定新坐标
that.style.left = x + "px";
that.style.top = y + "px";
}当然，上面的代码其实还是不够完善的，为啥呢？因为：
没有考虑到页面太长、出现滚动条的时候的情况
没有考虑到某些浏览器的特殊盒模型
没有考虑到可能会和其他脚本的事件绑定起冲突
因此，这个只能作为拖动原理的学习。
如果要得到很好的稳定性和兼容性，建议深入学习一下 jQuery UI 的 dragable 的相应代码。
以上，请采纳，请给分。
