HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum
 

 
 

Anzeige 
 
HTMLWorld » Forum

Thema anzeigen - GELÖST- DIV per Drag&Drop im Elternelement verschieben

 FAQFAQ   SuchenSuchen   MitgliederlisteMitgliederliste   BenutzergruppenBenutzergruppen   RegistrierenRegistrieren 
 ProfilProfil   Einloggen, um private Nachrichten zu lesenEinloggen, um private Nachrichten zu lesen   LoginLogin 

GELÖST- DIV per Drag&Drop im Elternelement verschieben

 

Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   CSS
Vorheriges Thema:
Nächstes Thema:  
Autor Nachricht
lordkefir



Anmeldungsdatum: 22.09.2009
Beiträge: 1

BeitragVerfasst am: 22.09.2009 13:16:54    Titel: GELÖST- DIV per Drag&Drop im Elternelement verschieben Antworten mit Zitat

Hallo zusammen!

Folgendes Szenario:
ich habe einen absoluten DIV mit fixer Breite und Höhe. In diesem DIV befindet sich ein weiterer Container, welcher größer als sein Elternelement ist. Diesen kann man mit der Maus verschieben (Drag&Drop).

Der IE, Webkit und Gecko haben keinerlei Problem mit der Darstellung. Nur im Opera (Version 10) habe ich folgende Probleme:

1. Positioniere ich den verschiebbaren DIV relativ, dann wird er rechts gekürzt.

2. Positioniere ich den DIV absolut, verkleinert sich der Parent-DIV, wenn ich das Child nach rechts verschiebe.

Schon klar das dies ein Bug ist (hoffe ich Wink), aber hat vielleicht jemand eine dreckige Idee, wie ich das Problem lösen kann?

Anbei mein 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>
[/code]


[EDITED]
Das Problem liegt wohl an meiner Opera-Installation. Unter einem anderen Benutzerkonto läuft es.
[/EDITED]
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   CSS
Alle Zeiten sind GMT + 1 Stunde
Seite 1 von 1

 
Gehe zu:  
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.