您的位置：首页 > 其它

在一个指定的div中拖拽

2015-09-12 10:31 337 查看

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1
{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
#div2
{
width: 400px;
height: 300px;
background: #cccccc;
}
</style>
<script type="text/javascript">
window.onload = function ()
{
var oDiv= document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var disX = 0;
var disY =0;
oDiv.onmousedown = function (ev)
{
var oEvent = ev||event;

disX =  oEvent.clientX-oDiv.offsetLeft;
disY = oEvent.clientY-oDiv.offsetTop;
document.onmousemove = function (ev)
{
var oEvent = ev||event;
var l = oEvent.clientX-disX;
var t = oEvent.clientY-disY;
if(l<oDiv2.offsetLeft)
{
l = oDiv2.offsetLeft;
}
else if(l>oDiv2.offsetWidth-oDiv.offsetWidth+oDiv2.offsetLeft)
{
l = oDiv2.offsetWidth-oDiv.offsetWidth+oDiv2.offsetLeft;
}
if(t<oDiv2.offsetTop)
{
t=oDiv2.offsetTop;
}
else if(t>oDiv2.offsetHeight-oDiv.offsetHeight+oDiv2.offsetTop)
{
t =oDiv2.offsetHeight -oDiv.offsetHeight+oDiv2.offsetTop;
}
oDiv.style.left = l +'px';
oDiv.style.top =t +'px';
};
document.onmouseup = function ()
{
document.onmousemove = null;
document.onmouseup = null;
};

}
}

</script>
</head>
<body>
<div id="div2">
<div id="div1"></div>
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航