js或jq,怎样让以下拖动效果,保持在黑色的框内?
发布网友
发布时间：2022-05-21 14:30
共1个回答
热心网友
时间：2023-08-25 08:53
<!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>
