<html>
<head>
<style>
#flowbox1, #flowbox2 {
width: 100px;
height: 100px;
border: 2px solid black;
}
#prisonbox {
width: 800px;
height: 600px;
border: 3px solid black;
}
#flowbox1 {
position: absolute;
top: 50px;
left: 20px;
background-color: red;
}
#flowbox2 {
position: absolute;
top: 100px;
left: 100px;
background-color: yellow;
}
</style>
<script type="text/javascript">
//Fremde Funktionen
function mouse_pos(evt)
{
// diese Funktion habe ich im Internet gefunden. Da es ein klein wenig kompliziert ist, die
// Mausposition Browserunabhängig zu bestimmen, habe ich das dieser Funktion hier überlassen!
if(!evt) evt = window.event;
var pos = new Object();
pos.left = evt.clientX;
pos.top = evt.clientY;
var b = (window.document.compatMode && window.document.compatMode == "CSS1Compat") ?
window.document.documentElement : window.document.body || null;
if (b)
{
pos.scrollLeft= pos.left + b.scrollLeft;
pos.scrollTop = pos.top + b.scrollTop;
}
else if(document.layers)
{
// Netscape 4.
pos.scrollLeft = evt.pageX;
pos.scrollTop = evt.pageY;
pos.left = evt.pageX - window.pageXOffset;
pos.top = evt.pageY - window.pageYOffset;
}
return pos;
}
// globale Variabeln
var on = false;
var flowID = 0;
// Eigene Funktionen
function flow(id) {
// Diese Funktion kümmert sich darum, dass die Bewegungsfunktion ausgeführt wird, solange die Maus gedrückt ist.
// die flowID gibt an, welche Box gedrückt wurde und ist später in der Bewegungs-Funktion wichtig!
flowID = id;
if(on)
{
if(window.document.releaseEvents) window.document.releaseEvents( Event.MOUSMOVE);
window.document.onmousemove = null;
}else
{
if(window.document.captureEvents) window.document.captureEvents(Event.MOUSEMOVE);
window.document.onmousemove = showMousePos;
}
on = !on;
}
function showMousePos(e)
{
// Diese Funktion sorgt für die Positionierung der FlowBox, für deren einschränkung in die Prisonbox und
// soll für die Positionierung des Mauszeigers sorgen. Letzteres funktioniert (noch) nicht, verursacht aber auch keine Fehler,
// sodass der Rest einwandfrei funktioniert.
var p = mouse_pos(e);
// Die Gefängnisbox, innerhalb derer die Bewegung möglich sein soll
var prison = document.getElementById("prisonbox");
// Diese Flowbox soll bewegt werden
var flowbox = document.getElementById(flowID);
// Die Position soll in einem Statusfeld zurückgegeben werden, zum debuggen
var status = document.getElementById("state");
// Wenn jemand auf eine FlowBox klickt, springt die Maus automatisch in die Mitte der Box.
// um dies zu ändern, einfach neue Werte setzen. Zum deaktivieren, einfach die Werte auf 0 setzen
var mousesetWidth = flowbox.offsetWidth/2;
var mousesetHeight = flowbox.offsetHeight/2;
// Der Rand, der zwischen FlowBox und Prisonbox unter jedem Umstand bleiben soll!
var offset = 5;
// Wenn die Mausposition das Gefängnis nach oben verlässt, setze die Mausposition auf maximale Höhe innerhalb des Gefängnisses!
if (p.top < prison.offsetTop+mousesetHeight+offset)
p.top = prison.offsetTop+mousesetHeight+offset;
// Wenn die Mausposition das Gefängnis nach unten verlässt, setze die Mausposition auf mindeste Höhe innerhalb des Gefängnisses!
if (p.top > prison.offsetHeight+prison.offsetTop-flowbox.offsetHeight+mousesetHeight-offset)
p.top = prison.offsetHeight+prison.offsetTop-flowbox.offsetHeight+mousesetHeight-offset;
// Wenn die Mausposition das Gefängnis nach links verlässt, setze die Mausposition auf minimale Weite innerhalb des Gefängnisses!
if (p.left < prison.offsetLeft+mousesetWidth+offset)
p.left = prison.offsetLeft+mousesetWidth+offset;
// Wenn die Mausposition das Gefängnis nach rechts verlässt, setze die Mausposition auf maximale Weite innerhalb des Gefängnisses!
if (p.left > prison.offsetWidth+prison.offsetLeft-flowbox.offsetWidth+mousesetWidth-offset)
p.left = prison.offsetWidth+prison.offsetLeft-flowbox.offsetWidth+mousesetWidth-offset;
// Dokumentiere die Soll-Koordinaten der Maus
document.getElementById("top").value = p.top;
document.getElementById("left").value = p.left;
// Koordiniere die Flowbox mit den sollkoordinaten der Maus.
document.getElementById(flowID).style.top = p.top-mousesetHeight;
document.getElementById(flowID).style.left = p.left-mousesetWidth;
}
</script>
</head>
<body>
<input id="top" size="5" type="text"><input id="left"><input id="state">
<div id="prisonbox">
<div id="flowbox1" onmousedown="flow('flowbox1')" onmouseup="flow('flowbox1')"> </div>
<div id="flowbox2" onmousedown="flow('flowbox2')" onmouseup="flow('flowbox2')"> </div>
</div>
</body>
</html>
