dropper: Drag & Drop mit onclick tadellos - aber für position:relative?

Beitrag lesen

SELF-Forum

Drag & Drop mit onclick tadellos - aber für position:relative?

dropper
– Informationen zu den Bewertungsregeln

Moin!

Frage: Wie bekommt man relativ positionierte Elemente mit drag&drop
       in den Griff?

Habe in vielen Foren gesehen, dass andere dieselben Probleme
mit drag&drop haben wie ich:
  -> Verzögerung bei Bildern, ungewollte Textmarkierungen, ...

Das vielen drag-and-droppern bekannte script von Daniel Thoma
[http://aktuell.de.selfhtml.org/artikel/javascript/draganddrop/index.htm]
arbeitet mit den event handlern onmousedown und onmouseup.

Nimmt man ein paar kleine Veränderungen vor, so lassen sich
auch Bilder und Schriften tadellos draggen und droppen -
nur leider nur abs. pos. Objekte; bei rel. pos. kann es passieren, dass,
will man das Objekt droppen, dieses sich nicht "unter" dem Cursor
befindet und somit der event handler onclick nicht greift:

  
var dragobjekt = null;  
  
var dragx = 0;  
var dragy = 0;  
  
var posX = 0;  
var posY = 0;  
  
function draginit() {  
  document.onmousemove = drag;  
} // und KEIN document.onmouseup = dragstop  
  
var busy = 0; // hinzugefügt  
  
function dragstart(element) {  
  if (busy == 0) { // hinzugefügt  
     busy = 1; // hinzugefügt  
     dragobjekt = element;  
     dragx = posX - dragobjekt.offsetLeft;  
     dragy = posY - dragobjekt.offsetTop;  
  }  
}  
  
function dragstop() {  
  dragobjekt=null;  
  busy = 0; // hinzugefügt  
}  
  
function drag(e) {  
  posX = document.all ? window.event.clientX : e.pageX;  
  posY = document.all ? window.event.clientY : e.pageY;  
  if (dragobjekt != null) {  
     dragobjekt.style.left = (posX - dragx) + "px";  
     dragobjekt.style.top = (posY - dragy) + "px";  
  }  
}

HTML:
[code lang=html
<body onload="javascript:draginit()">

<img src="bild.png"
     style="position:absolute; left:50px; top:50px;"
     onclick=
            "if(busy==0){javascript:dragstart(this);}
            else {javascript:dragstop();}"
[/code]

lieben gruß

Beitrag melden
–
Informationen zu den Bewertungsregeln