js或jq，怎样让以下拖动效果，保持在黑色的框内？

<styletype="text/css">#main{width:1000px;height:600px;border:1pxsolid#000;}#maindiv{p... <style type="text/css">
#main { width:1000px; height:600px; border:1px solid #000;}
#main div{position:absolute;width:220px;height:150px;border:1px solid #999;}
</style>
<script type="text/javascript">
var a;
document.onmouseup = function() {
if (!a) return;
document.all ? a.releaseCapture() : window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
a = "";
};
document.onmousemove = function(d) {
if (!a) return;
if (!d) d = event;
a.style.left = (d.clientX - b) + "px";
a.style.top = (d.clientY - c) + "px";
};

function move(o, e) {
a = o;
document.all ? a.setCapture() : window.captureEvents(Event.MOUSEMOVE);
b = e.clientX - parseInt(a.style.left);
c = e.clientY - parseInt(a.style.top);
o.style.zIndex = getMaxIndex() + 1;
}

function $(id) {
return document.getElementById(id);
}

function getMaxIndex() {
var index = 0;

var ds = $('main').getElementsByTagName('div');
var l = $('main').getElementsByTagName('div').length;

for (i = 0; i < l; i++) {
if (ds[i].style.zIndex > index) index = ds[i].style.zIndex;

}
return index;
}
</script>

<div id="main">
<div style="left:100px;top:100px;background:#fc9;" onmousedown="move(this,event)">1</div>
<div style="left:400px;top:100px;background:#9cf;" onmousedown="move(this,event)">2</div>
<div style="left:700px;top:100px;background:#f9c;" onmousedown="move(this,event)">3</div>
</div> 展开

 我来答

1个回答

#热议# 应届生在签三方时要注意什么？

匿名用户
推荐于2016-05-06

展开全部

已完成，复制粘贴，采纳即可

<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8>
<title>recursion</title>
<style type="text/css">
#main {
	width: 1000px;
	height: 600px;
	border: 1px solid #000;
}

#main div {
	position: absolute;
	width: 220px;
	height: 150px;
	border: 1px solid #999;
}
</style>
<script type="text/javascript">
	var a;
    document.onselectstart = document.ondragstart = document.oncontextmenu = function ()
    {
	    return false;
    };
    document.onmouseup = function ()
    {
	    if (!a)
		    return;
	    document.all ? a.releaseCapture () : window.captureEvents (Event.MOUSEMOVE | Event.MOUSEUP);
	    a = "";
  岩冲运  };
    document.onmousemove = function (d)
    {
	    if (!a)
		    return;
	    if (!d)
		    d = event;
	    var x = d.clientX - b;
	    var y = d.clientY - c;
	   粗梁 x = x < $ ('main').offsetLeft ? $ ('main').offsetLeft : x;
	    x = x > $ ('main').offsetLeft + $ ('main').offsetWidth - a.offsetWidth ? $ ('main').offsetLeft
	            + $ ('main').offsetWidth - a.offsetWidth : x;
	    
	    y = y < $ ('main').offsetTop ? $ ('main').offsetTop : y;
	    y = y > $ ('main').offsetTop + $ ('main').offsetHeight - a.offsetHeight ? $ ('main').offsetTop
	            + $ ('main').offsetHeight - a.offsetHeight : y;
	    a.style.left = x + "px";
	    a.style.top = y + "px";
    };
    
    function move (o, e)
    {
	    a = o;
	    document.all ? a.setCapture () : window.captureEvents (Event.MOUSEMOVE);
	    b = e.clientX - parseInt (a.style.left);
	    c = e.clientY - parseInt (a.style.top);
	    o.style.zIndex = getMaxIndex () + 1;
    }
    
    function $ (id)
    {
	    return document.getElementById (id);
    }
    
    function getMaxIndex ()
    {
	    var index = 0;
	    var ds = $ ('main').getElementsByTagName ('div');
	    var l = $ ('main').getElementsByTagName ('div').length;
	    for (i = 0; i < l; i++)
	    {
		    if (ds[i].style.zIndex > index)
			    index = ds[i].style.zIndex;
	    }
	 判盯   return index;
    }
</script>
</head>
<body>
	<div id="main">
		<div style="left: 100px; top: 100px; background: #fc9;" onmousedown="move(this,event)">1</div>
		<div style="left: 400px; top: 100px; background: #9cf;" onmousedown="move(this,event)">2</div>
		<div style="left: 700px; top: 100px; background: #f9c;" onmousedown="move(this,event)">3</div>
	</div>
</body>
</html>

已赞过 已踩过<

评论收起

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

js或jq，怎样让以下拖动效果，保持在黑色的框内？

其他类似问题

为你推荐：