DIV in einem DIV per Drag&Drop verschieben (Opera Problem)

**Lord Kefir** · 23-09-2009, 08:56

Guten Morgen!

Ich habe einen absolut positionierten DIV mit fixer Höhe/Breite, welcher wiederum einen einzelnen DIV enthält. Dieser ist größer als sein Parent und kann vom Benutzer mit der Maus verschoben werden - dies funktioniert wunderbar unter Webkit, Gecko und dem IE.

Unter Opera 10 habe ich leider ein Problem. Positioniere ich das Child relativ, so wird es rechts gekürzt. Auch bei einer absoluten Positionierung tritt ein Fehler auf: verschiebt man das Child nach rechts, so ändert sich (trotz Größenangabe) die Breite des Parents.

Ich gehe mal davon aus, dass es sich um einen Opera-Bug handelt. Trotzdem benötige ich eine Lösung und hoffe, dass hier vielleicht jemand einen dreckigen Workaround kennt

Hier ist der Code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>test</title> 

<script type="text/javascript"> 
   var objDrag = null; 
   var mouseX = 0; 
   var mouseY = 0; 
   var offX = 0; 
   var offY = 0; 
   var IE = false; 

   IE = document.all&&!window.opera; 
   if(navigator.appName == 'Microsoft Internet Explorer') 
   { 
      IE = true; 
   } 

   function init() 
   { 
      document.onmousemove = doDrag; 
      document.onmouseup = stopDrag; 
   } 

   function startDrag(objElem) 
   { 
      objDrag = objElem; 

      offX = mouseX - objDrag.offsetLeft; 
      offY = mouseY - objDrag.offsetTop; 
   } 


   function doDrag(e) 
   { 
          mouseX = (IE) ? window.event.clientX : e.pageX; 
      mouseY = (IE) ? window.event.clientY : e.pageY; 

      if (objDrag != null) 
      { 
         objDrag.style.left = (mouseX - offX) + "px"; 
         objDrag.style.top = (mouseY - offY) + "px"; 
      } 
   } 

   function stopDrag(e) 
   { 
      objDrag = null; 
   } 
</script> 
</head> 

<body onload="init();"> 
   <div style="position:relative; width:600px; height:500px; border:1px solid black; overflow:hidden;"> 
      <div style="position:absolute; border:1px solid black; background-color:red; width:1000px; height:200px; cursor:pointer;" onmousedown="startDrag(this);"> 
         TEST 
      </div> 
   </div> 
</body> 
</html>

[edited]
Das Problem hing wohl mit meinen Benutzereinstellungen zusammen - unter einem anderen Benutzerkonto klappt es. So kann man auch seine Zeit verschwenden... *grummel*
[/edited]