html网页里实现的拖动效果后所出现是问题求解答！！！ 100

如图，这是我做的一个页面，上面的街道草地是一个大背景。鼠标可以拖拽大背景实现拖动效果。蓝色的图片框是将来要网上添加的建筑图片，现在问题有两个，第一个是鼠标拖动背景没问题，... 如图，这是我做的一个页面，上面的街道草地是一个大背景。鼠标可以拖拽大背景实现拖动效果。蓝色的图片框是将来要网上添加的建筑图片，现在问题有两个，第一个是鼠标拖动背景没问题，可以实现效果。但是鼠标如果拖动背景上面的图片就不能实现拖动效果了。他出现的效果就是这个大背景就粘在鼠标上了，鼠标松开也没有用，必须重新点一下才会解除拖动效果。想请大神帮我解决这个问题。
第二个问题是。我想让鼠标拖动这个大背景当拖动到背景的边缘的时候，就不再让鼠标继续往外拖了。也就是拖动到边缘以后顶多在多露出十像素，在往外就拖不了了，也想请大神帮我解决这个问题。由于我这个文件比较多，里面含有图片，直接发代码表达不清我说的效果，所以请有能力的大神留下邮箱，我把这个源文件发过去帮我解决。解决完以后在邮件回给我，邮件里注明您的百度名字。问题解决后我给采纳您的答案。现在这谢谢大神了！我的邮箱是：hyb90517@163.com（主要是解决第一个问题，第二个问题如果也解决了我会在追加分。）展开

 我来答

2个回答

#热议# 普通体检能查出癌症吗？

百度网友5a387ee
2014-11-11

知道答主

回答量：41

采纳率：0%

帮助的人：15.7万

我也去答题访问个人页

关注

展开全部

<!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>
<script type="text/javascript">
var rDrag = {
o: null,
init_Div: function (o) {
o.onmousedown = this.start_Div;
},
start_Div: 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_Div;
document.onmouseup = rDrag.end_Div;
},
move_Div: 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_Div: 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;
}
}
window.onload = function () {
var obj_Div = document.getElementById('div1');
rDrag.init_Div(obj_Div);
}
</script>
<style>
#div1
{
background-color: #999;
height: 536px;
width: 732px;
top: 50px;
left: 200px;
padding: 10px;
position: absolute;
}
.myImg
{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="div1">
<img class="myImg" alt="" src="images/start1.jpg">
<img class="myImg" alt="" src="images/start1.jpg">
<img class="myImg" alt="" src="images/start1.jpg">
<img class="myImg" alt="" src="images/start1.jpg">
<img class="myImg" alt="" src="images/start1.jpg">
</div>
</body>
</html>

你看看是不是这意思时间关系没细写

追问

对的，你太厉害了，就是这样的效果。现在鼠标拖动图片的问题已经完全解决了。你能告诉我是什么原因吗？还有第二个问题，就是如何让鼠标拖动到图片的边缘以后就不再拖动？期待你的回答。12号下午五点前采纳答案。如果第二个问题也能解决，我给你追加分，如果解决不了的话我就采纳你的答案啦。

追答

move_Div: function (e) {
                debugger;
                e = rDrag.fixEvent(e);
                var oLeft, oTop;
                oLeft = e.clientX - rDrag.o.x;
                oTop = e.clientY - rDrag.o.y;
                var w = window.screen.availWidth - 600;
                var h = window.screen.availHeight - 500;
                //在这里写判断， 这里600,500就是你div的宽高
                //你应该写js获取div的宽高，我这里为了简单就没写，自己研究研究一下吧

                if (oLeft >= 0 && oLeft = 0 && oTop <= h) {
                    rDrag.o.style.top = oTop + 'px';
                }
            },

已赞过 已踩过<

评论收起

匿名用户
2014-11-11

展开全部

追问

不讲究啊，竟然发广告链接。- -！

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

html网页里实现的拖动效果后所出现是问题求解答！！！ 100

其他类似问题

为你推荐：