tomgk: Verschieben von Bildern durch Drag and Drop-Events

Beitrag lesen

SELF-Forum

Verschieben von Bildern durch Drag and Drop-Events

tomgk
– Informationen zu den Bewertungsregeln

Hallo,

Ich kapiers nicht.

Hier mein Derzeitiger Code:

<html>  
<head>  
<script src="JS/Draganddrop.js" type="text/javascript"></script>  
<script type="text/javascript">  
</script></head>  
<body>  
<div id="box" onmousedown="dragstart(this)" style="position:absolute;top:200px;left:0px;height:100px;width:100px;background:#00ff00"> </div>  
<img id="bild" onmousedown="dragstart(this)" src="../Images/working.gif" align=middle valign=center>  
<script>  
 draginit("box",drag, dragstop);  
 draginit("bild",drag, dragstop);  
</script>  
</body>  
  
</body>  
</html>

Und Draganddrop.js:

//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;  
  
//Höchster Z-Index  
var zIndex=0;  
  
  
function draginit(elementID,onmove,onup)  
{  
 // Initialisierung der Überwachung der Events  
 document.getElementById(elementID).onmousemove=onmove  
 document.getElementById(elementID).onmouseup = onup;  
 return false;  
}  
  
  
function dragstart(element)  
{  
 //Wird aufgerufen, wenn ein Objekt bewegt werden soll.  
  
 dragobjekt = element;  
 dragx = posx - dragobjekt.offsetLeft;  
 dragy = posy - dragobjekt.offsetTop;  
  
 //zIndex erhöhen!  
 ++zIndex;  
 element.style.zIndex=zIndex;  
 return false;  
}  
  
  
function dragstop()  
{  
 //Wird aufgerufen, wenn ein Objekt nicht mehr bewegt werden soll. Ansonsten würde Element an Mauszeiger kleben!  
 dragobjekt=null;  
 return false;  
}  
  
  
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";  
 }  
 return false;  
}

Wie schon gesagt: Es funktionier nur beim DIV.

MfG
tomgk

Beitrag melden
–
Informationen zu den Bewertungsregeln