Hallo, ich nochmal,
aber dieses mal mit etwas Quelltext und dem Ziel die in der ersten Hauptbox enthaltenen Boxen
in die zweite Hauptbox per Drag & Drop zu verschieben.
Nun der Knackpunkt: Wenn ich overflow:auto weglasse, dann fehlen die Scrollbalken aber wenn ich
es dran lasse, dann kann ich die Elemente nicht verschieben.
Ich tüftle nun schon die ein oder andere Stunde aber wenn jemand eine Idee oder einen Ansatz hat,
bin ich sehr dankbar dafür.
[/quote]
aber dieses mal mit etwas Quelltext und dem Ziel die in der ersten Hauptbox enthaltenen Boxen
in die zweite Hauptbox per Drag & Drop zu verschieben.
Nun der Knackpunkt: Wenn ich overflow:auto weglasse, dann fehlen die Scrollbalken aber wenn ich
es dran lasse, dann kann ich die Elemente nicht verschieben.
Ich tüftle nun schon die ein oder andere Stunde aber wenn jemand eine Idee oder einen Ansatz hat,
bin ich sehr dankbar dafür.
Code:
<html>
<head>
<title></title>
<STYLE type=text/css>
.obox
{
BORDER-RIGHT: #000000 1px solid;
BORDER-TOP: #000000 1px solid;
BORDER-LEFT: #000000 1px solid;
BORDER-BOTTOM: #000000 1px solid;
POSITION: absolute;
BACKGROUND-COLOR: #ffff00
}
.ibox
{
BORDER-RIGHT: #000000 1px solid;
BORDER-TOP: #000000 1px solid;
BORDER-LEFT: #000000 1px solid;
BORDER-BOTTOM: #000000 1px solid;
POSITION: absolute;
BACKGROUND-COLOR: #e0e0e0
}
</STYLE>
<SCRIPT type=text/javascript>
//Globales Objekt das die Drag-Information enhält.
var bodObj = new Object();
var dragObj = new Object();
dragObj.zIndex = 0;
function dragStart(event, id)
{
var el;
var x, y;
//Drag-Objekt anlegen mit dem Element, das gezogen werden soll
dragObj.elNode = document.getElementById(id);
bodObj.elNode = document.getElementById('body1');
//Cursor-Position ermitteln
x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
//Speichern der Startposition
dragObj.cursorStartX = x;
dragObj.cursorStartY = y;
dragObj.elStartLeft = parseInt(dragObj.elNode.style.left, 10);
dragObj.elStartTop = parseInt(dragObj.elNode.style.top, 10);
//Aktualisieren des z-Index:
dragObj.elNode.style.zIndex = ++dragObj.zIndex;
//Mousemove caputuren
document.attachEvent("onmousemove", dragGo);
document.attachEvent("onmouseup", dragStop);
window.event.cancelBubble = true;
window.event.returnValue = false;
}
function dragGo(event)
{
var x, y;
//Cursor-Position ermitteln
x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
//Bewegen des Drag-Elements um den gleichen Betrag wie die Mouse
dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
dragObj.elNode.style.top = (dragObj.elStartTop + y - dragObj.cursorStartY) + "px";
window.event.cancelBubble = true;
window.event.returnValue = false;
}
function dragStop(event)
{
//Stoppen der Capturing-Bewegung
document.detachEvent("onmousemove", dragGo);
document.detachEvent("onmouseup", dragStop);
}
</SCRIPT>
</head>
<body id="body1">
<div id="box2" class="obox" style="width:200px; height:200px; top:10px; left:220px;">
hallo
</div>
<div id="box1" class="obox" style="width:200px; height:200px; top:10px; left:10px; overflow:auto;">
<div id="box3" class="ibox" style="width:50px; height:50px; top:10px; left:10px;" onmousedown="dragStart(event, 'box3')" price="200">
hallo
</div>
<div id="box4" class="ibox" style="width:50px; height:50px; top:70px; left:10px;" onmousedown="dragStart(event, 'box4')" price="200">
hallo
</div>
<div id="box5" class="ibox" style="width:50px; height:50px; top:130px; left:10px;" onmousedown="dragStart(event, 'box5')" price="200">
hallo
</div>
<div id="box6" class="ibox" style="width:50px; height:50px; top:190px; left:10px;" onmousedown="dragStart(event, 'box6')" price="200">
hallo
</div>
</div>
</body>
</html>