deb_ugger
Erfahrenes Mitglied
Hi!
Ich versuche gerade eine Lösung für einen Drag and Drop Mechanismus zu finden. Ich hab da mehrere Einträge, die alle in einem DIV drinnen sind. Jetzt möchte ich diese Einträge angreifen können und in einen bestimmten Bereich ziehen. Der ist beispielsweise auch wieder ein DIV. Dort soll dann auch ein Ereignis ausgelöst werden (z.B. es ändert sich die Hintergrundfarbe).
Das Problem: Anscheinend funktioniert das mit DIVs nicht ganz so gut. Ich hab hier mal einen Code auf Selfhtml gefunden und diesen modifiziert. Wenn ich das türkise Feld über das graue ziehe, sollte dieses Ereignis ausgelöst werden. Das funktioniert aber leider nicht. Kann mir da wer weiterhelfen?
Danke!
mfg
debugger
PS: Hier der Code:
Ich versuche gerade eine Lösung für einen Drag and Drop Mechanismus zu finden. Ich hab da mehrere Einträge, die alle in einem DIV drinnen sind. Jetzt möchte ich diese Einträge angreifen können und in einen bestimmten Bereich ziehen. Der ist beispielsweise auch wieder ein DIV. Dort soll dann auch ein Ereignis ausgelöst werden (z.B. es ändert sich die Hintergrundfarbe).
Das Problem: Anscheinend funktioniert das mit DIVs nicht ganz so gut. Ich hab hier mal einen Code auf Selfhtml gefunden und diesen modifiziert. Wenn ich das türkise Feld über das graue ziehe, sollte dieses Ereignis ausgelöst werden. Das funktioniert aber leider nicht. Kann mir da wer weiterhelfen?
Danke!
mfg
debugger
PS: Hier der Code:
Code:
<html>
<head>
<title>Drag-and-Drop</title>
<script type="text/javascript">
<!-- gueltig fuer Netscape ab Version 6, Mozilla, Internet Explorer ab Version 4
//Das Objekt, das gerade bewegt wird.
var dragobjekt = null;
// Position, an der das Objekt angeklickt wurde.
var dragx = 0;
var dragy = 0;
// Mausposition
var posx = 0;
var posy = 0;
function draginit() {
// Initialisierung der Überwachung der Events
document.onmousemove = drag;
document.onmouseup = dragstop;
// Urspruengliche Position der Layer
var oldlayerposleft = document.getElementById('einser').style.left;
var oldlayerpostop = document.getElementById('einser').style.top;
}
function dragstart(element) {
//Wird aufgerufen, wenn ein Objekt bewegt werden soll.
dragobjekt = element;
dragx = posx - dragobjekt.offsetLeft;
dragy = posy - dragobjekt.offsetTop;
}
function dragstop() {
//Wird aufgerufen, wenn ein Objekt nicht mehr bewegt werden soll.
dragobjekt=null;
}
function drag(ereignis) {
//Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.
posx = document.all ? window.event.clientX : ereignis.pageX;
posy = document.all ? window.event.clientY : ereignis.pageY;
if(dragobjekt != null) {
dragobjekt.style.left = (posx - dragx) + "px";
dragobjekt.style.top = (posy - dragy) + "px";
dragobjekt.style.cursor = "move";
}
}
function test() {
alert("geht");
}
//-->
</script>
<style>
#einser, #zweier {
width: 140px;
height: 140px;
position: absolute;
}
#einser {
left: 200px;
top: 100px;
background-color: #99CCCC;
z-index: 2;
}
#zweier {
left: 0px;
top: 0px;
background-color: #efefef;
border: solid 1px #ccc;
}
</style>
</head>
<body onload="draginit()">
<br />
<br />
<br />
<br /><br /><br /><br /><br /><br />
<div id="einser" onmousedown="dragstart(this);">zieh mich auf das graue feld</div>
<div id="zweier" ondragover="test();"></div>
</body>
</html>
Zuletzt bearbeitet:
