Drag&Drop funktioniert nicht richtig

[Hookah]

Hallöchen,

Ich hab die SuFu benutzt aber da konnt mir nicht geholfen werden.

Bei Google fand ich folgendes (von Selfhtml):

<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;
}


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";
  }
}
//-->
</script>

Nun das funktioniert auch aber leider nur solange im <div> kein Bild vorhanden ist. Und genau da liegt auch das Problem. Ich möchte das man klene Icons bewegen kann. Man kann sie zwar bewegen aber nur ein paar pixel in eine Richtung bis dann plötzlich das Icon an dem Mauszeiger klebt bis man erneut klickt.

Gibts da eine lösung für?

Eine frage hab ich auch noch. Was bedeutet das ? bei

 posx = document.all ? window.event.clientX : ereignis.pageX;

?


Sonnige Grüße

 

[Quaese]

Hi,

du kannst das Bild/Icon als Hintergrundbild des Elements, das bewegt werden soll, angeben.

<div style="position: absolute; width: 100px; height: 100px; background: url(bild.gif) no-repeat;" onmousedown="dragstart(this);" onmouseup="dragstop();"></div>

Zur deiner zweiten Frage. Beim ?-Operator handelt es sich um eine vereinfachte bedingte Anweisung - mehr
dazu bei SelfHTML.

Ciao
Quaese

 

[Hookah]

Da hätt ich auch selber drauf kommen können , dank dir.


Edit: Ich hätte da noch was.

Also ich einen <div> Container in welchem sich ein Bild befindet. Beim Klick soll das Menü direkt über diesem befinden , da aber die Seite beliebig vergrößert werden kann muss ich wenigstens die y koordinate wissen damit das menü auch immer passend angezeigt wird. Also wenn ich es mit :

var btnY = document.getElementById('Button').offsetTop;

probiere bekomm ich bei mir 548 raus , aber leider nur in FF. Im IE ist btnY leer.

Dann probierte ich es auch mal mit :

var btnY = document.all.Button.offsetTop;

Ist aber das selbe wie vorher , der IE machts nicht.

Hat da jemand eine Idee?