鼠标拖拽div中的内容
div中的内容超出了div的高度出现滚动条，但是我不想用滚动条，想用鼠标拖动div中的内容，向上、向下、向左、向右拖动查看div中的内容例如：div中的内容已经超出了di...
div中的内容超出了div的高度出现滚动条，但是我不想用滚动条，想用鼠标拖动div中的内容，向上、向下、向左、向右拖动查看div中的内容
例如：div中的内容已经超出了div的高度出现了滚动条，我拖动div中的内容向上，滚动条向下滚动，如果拖到最下边就不可以拖动了 展开
例如：div中的内容已经超出了div的高度出现了滚动条，我拖动div中的内容向上，滚动条向下滚动，如果拖到最下边就不可以拖动了 展开
展开全部
看看是不是你想要的，经测试：在chrome31，firefox25和IE8中能够正常使用，其他浏览器没有测试。
<!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>在div内部拖动div</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<style type="text/css">
*{margin:0; padding:0;}
.main{width: 400px;height: 400px;border: 1px solid #000;position: relative; left:30px; top:30px; overflow: hidden;}
.main:hover{cursor:move;}
.content{position: absolute; left:0; top:0; width: 600px;height: 600px;background: #7bb7fa; line-height:24px; -webkit-user-select:none; -user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none;}
</style>
</head>
<body>
<div id="main" class="main">
<div id="content" class="content">
可以不可以在这下雨天
为你撑起伞
遮蔽那一片
乌云的伤感
可不可以就这样简单
轻轻地走在路边
听着秋雨的缠绵
说着天的那一边
可不可以在这时间
说说对你的思念
如秋雨般连成线
连成同心环
可不可以一直向前
手牵着手，永远
守着彼此的唯一不变
你就是我最唯一的爱恋
可不可以就这样结束孤单
……
</div>
</div>
</body>
</html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
var isDown = false;// 是否能够移动
var initialLeft = 0; // 鼠标摁下时的坐标
var initialTop = 0;
var divLeft = 0; // 鼠标摁下时内部div的坐标
var divTop = 0;
$("#main").bind("mousemove", function(event){
var opposite = getOppositeCoor("main", event);
if(isDown){
var divl = divLeft+(opposite.left-initialLeft);
var divt = divTop+(opposite.top-initialTop);
$("#content").css({'left':divl, 'top':divt});
}
});
$("#main").bind("mousedown", function(event){
isDown = true;
var opposite = getOppositeCoor("main", event);
initialLeft = opposite.left;
initialTop = opposite.top;
divLeft = parseInt($("#content").css("left"));
divTop = parseInt($("#content").css("top"));
});
$("#main").bind("mouseup", function(){
isDown = false;
initialLeft = 0;
initialTop = 0;
divLeft = 0;
divTop = 0;
})
})
// 获取鼠标相对div的left和top值
function getOppositeCoor(id, event){
event = event || window.event;
var obj = document.getElementById(id);
var left = obj.offsetLeft;
var top = obj.offsetTop;
var parObj = obj;
while(parObj = parObj.offsetParent){
left += parObj.offsetLeft;
}
parObj = obj;
while(parObj = parObj.offsetParent){
top+=parObj.offsetTop;
}
var OppositeCoorLeft = event.clientX-left+document.body.scrollLeft;
var OppositeCoorTop = event.clientY-top+document.body.scrollTop;
return {'left':OppositeCoorLeft, 'top':OppositeCoorTop};
}
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
