Drag'n'Drop-Problem mit script.aculo.us

dj-digger · 30.03.2011, 15:02

Hi,

ich hoffe ihr habt einen Rat bzw. Idee.

Code:

<html>
 <head>
 <title>Drag and Drop Example</title>
 <script type="text/javascript" 
         src="/javascript/prototype.js"></script>
 <script type="text/javascript"
         src="/javascript/scriptaculous.js"></script>
 
 <script type="text/javascript">
    window.onload = function() {
    // Make all the images draggables from draggables division.
    $A($('draggables').getElementsByTagName('img')).each(
       function(item) {
          new Draggable(
             item,
             {
                revert: true,
                ghosting: true
             }
          );
       }
    );
 
    Droppables.add(
      'droparea',
      {
         hoverclass: 'hoverActive',
         onDrop: moveItem
      }
   );
    // Set drop area by default  non cleared.
    $('droparea').cleared = false;
 }
 function moveItem( draggable,droparea){
    if (!droparea.cleared) {
       droparea.innerHTML = '';
       droparea.cleared = true;
    }
    draggable.parentNode.removeChild(draggable);
    droparea.appendChild(draggable);
 }
 </script>
 <style type="text/css">
 #draggables {
    width: 172px;
    border: 3px ridge blue;
    float: left;
    padding: 9px;
 }
 #droparea {
    float: left;
    margin-left: 16px;
    width: 172px;
    border: 3px ridge maroon;
    text-align: center;
    font-size: 24px;
    padding: 9px;
    float: left;
 }
 .hoverActive {
    background-color: #ffffcc;
 }
 
 #draggables img, #droparea img {
    margin: 4px;
    border:1px solid red;
 }
 </style>

 </head>
 <body>
 <div id="draggables">
    <img src="/images/html.gif"/>
    <img src="/images/css.gif"/>
    <img src="/images/xhtml.gif"/>
    <img src="/images/wml_logo.gif"/>
    <img src="/images/javascript.gif"/>
 </div>

 
 <div id="droparea">
    Drag and Drop Your Images in this area
 </div>
 </body>
 </html>

Diese Beispiel habe ich von tutorialspoint.com 1zu1 übernommen. Und es funktionierte nicht so wie hier in der Demo Drag'n'Drop Example.

Folgendes passiert: In dem Beispiel werden die Bilder schön untereinander angeordnet. In meinem Beispiel werden die Bilder übereinander gelegt. Jetzt habe ich heraus gefunden, dass die Tutorialpage scriptaculous in der Version 1.8.1 verwendet und ich bei mir die neueste Version 1.9.0 habe. Workaround für mich ist im Moment auch die 'alte Version' zu verwenden, Sinn würde es doch aber bestimmt machen, immer die neueste Version zu nehmen.

Weiß jemand woran das liegt? Danke im Voraus.

nikosch · 30.03.2011, 15:05

Kann ja eigentlich nur am HTML/CSS liegen.

Heiko R · 30.03.2011, 23:20

Ich arbeite nicht mit script.aculo.us, ich gehöre zu den jQuery-Anhängern, aber:
Ein kurzer Vergleich im Firebug zeigt, dass der relevante Unterschied zwischen 1.8.1 und 1.9.0 der ist, dass die neuere Version "gedroppte" Elemente absolut statt relativ positioniert.

Wenn du als letzte Zeile in function moveItem() {} einfach ein

PHP-Code:

  draggable.style.position = 'relative';

einfügst, löst das in diesem Fall das Problem.
Ob es sinnvoll ist, sei mal dahin gestellt.
Vielleicht solltest du dich einfach mal intensiv mit dem Drag&Drop der aktuellen Version auseinandersetzen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit Ajax - Session Problem	halskrause	PHP Tipps 2009	10	12.01.2010 02:27
[Erledigt] Problem mit Mehrsprachigkeit	Sniper_Kotaro	PHP Tipps 2009	2	16.12.2009 11:47
Problem beim Download Management	mistermint	PHP Tipps 2009	8	24.10.2009 11:34
Umlaut Problem	nokieone	PHP Tipps 2009	7	16.10.2009 19:30
Problem mit Basedir in PhP	cmuch05	Datenbanken	9	08.01.2009 14:17
[Erledigt] Problem: PHP Selbe Datei mehr als 1 Mal	soulan	PHP Tipps 2008	13	28.11.2008 22:51
Problem Upload mehrere Dateien und schreiben in DB	Lapje	PHP Tipps 2008	1	22.10.2008 13:12
utf8 Problem (Daten aus DB auslesen)	go1denboy	PHP Tipps 2008	1	23.09.2008 12:19
Problem mit swfobjects	R4v3r	JavaScript, Ajax und mehr	8	21.09.2008 14:17
[Erledigt] Galerie Problem...	coraplanet	PHP Tipps 2008	4	06.06.2008 13:42
datensätze defekt oder problem mit dem einlesen?	Ministry	Datenbanken	4	06.07.2006 18:42
problem!!!		PHP Tipps 2006	6	08.02.2006 11:06
Smarty und PHP-Skript Problem		PHP Tipps 2004-2	2	03.12.2004 22:27
Problem mit alter JavaScript-Funktion	woods	PHP Tipps 2004	1	13.08.2004 13:34


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

30.03.2011, 15:05
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Kann ja eigentlich nur am HTML/CSS liegen. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --