jquery sortable nach drop nicht korrekt möglich

[Sir Robert de Broux]

Hallo,

ich habe eine kleine Liste mit Namen (Spieler 1-5) und möchte aus dieser einen Namen in einen droppable Bereich (class Spielfeld) bringen, das funktioniert auch soweit.

<div id="spieler" style="background-color:#889977;position:absolute; top:1px; left:1px;width: 100px; height: 150px;">
   <div class="spielerliste">
   <li>Spieler 1</li>
   <li>Spieler 2</li>
   <li>Spieler 3</li>
   <li>Spieler 4</li>
   <li>Spieler 5</li>
   </div>
</div>



<div id="p1" class="spielfeld"  style="position:absolute; top:195px; left: 200px;width: 100px; height: 100px; background-color: #887799;">
<div class="platzhalter"></div>
</div>

<div id="p2" class="spielfeld"  style="position:absolute; top:195px; left: 75px; width: 100px; height: 100px; background-color: #887799;">
<div class="platzhalter"></div>
</div>

Nun möchte ich, dass man den Namen auch wieder in seine Ursprungsliste zurück legen kann. Dies funktioniert nur bedingt. Wenn ich per drag den Namen ans Ende der Ursprungsliste bringe, dann funktioniert der drop nicht. Er funktioniert erst dann, wenn ich den Namen über die übrig gebliebenen Namen in der Ursprungsliste los lasse (drop'e). Dieser wird dann ans Ende der Liste angefügt. Leider funktioniert aber meine Sortierung der Liste dann nicht mehr richtig. Wenn ich den soeben per drop eingefügten Namen per sortable noch oben befördern will geht das nicht. Wenn ich einen zuvor noch nicht per drag&drop benutzten Namen aus der Liste unter einen schon per drag&drop hin und her bewegten Namen setze, dann verändert sich die Sortierung wunschgemäß. Leider finde ich den Fehler nicht. Kann mir bitte jemand weiterhelfen.

<script>
 $(function() {

   $( ".spielerliste li" ).draggable({
      appendTo: "body",
      revert: "invalid",
      helper: "clone"
   });

   $( ".spielfeld" ).droppable({
         accept: ".spielerliste li, .spielfeld li, #spieler li",
         drop: function( event, ui ) {
            if($(this).find('li').length>0) {
            }
            else {
               $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
               entfernen(ui.draggable);
            }
         }
   }).sortable({
         items: "li",
         sort: function() {
             $( this ).removeClass( ".platzhalter" );
         }
   });

   $( ".spielerliste" ).droppable({
         accept: ".spielfeld li, .spielerliste li, #spieler li",
         drop: function( event, ui ) {
            $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
            entfernen(ui.draggable);
         }
   }).sortable({
         items: "li:not(.platzhalter)",
         sort: function() {
             $(this).removeClass( ".platzhalter" );
          }
      });

});
function entfernen($item) {
  $item.remove();
}
</script>

hier noch der Link:

http://www.justgame.de/test-dd.html
Vielen Dank.

[Wasser_Wanderer]

Ich kann dir keine Lösung anbieten.
Dafür aber eine Drag-and-Drop Lösung die ich mal vor Jahren gefunden habe.

Basiert zwar noch auf mysql aber das auf mysqli umzubauen sollte einfach sein.

Das schöne dabei ist:
Per D+D die Objekte an die Stelle zu legen wo man sie braucht.

Man hat die Alternative zwischen:
1. Per POST die Daten zu speichern
oder
2. Per AJAX direkt in die DB zu schreiben ohne POST.

Wenn Du das haben möchtest, melde sich Privat bei mir, um dir das per E-Mail als *.zip zu senden.

Gruss WW

Edit:
Link_1: Schreibt nix zeigt aber an http://mcleod.pf-control.de/drag_and_drop/
Link_2: Schreibt in eine DB (nur zum Testen) http://mcleod.pf-control.de/drag_and_drop/dd.php

Diese Links sind nur temporär verfügbar und werden von mir bald wieder gelöscht

[Quetschi]

Wenn ich dein Problem richtig verstehe, dann müsstest du dem div mit der Klasse spielerliste eine fixe höhe geben.

Edit:
Das Problem, dass dann die zurückgelegten Spieler dann nicht mehr sortierbar sind hat wohl etwas damit zu tun, dass die Spieler - sobald sie aus der obigen Liste in eine der unteren verschoben werden - die draggable-funktionalität verlieren. Ich kenne das draggable-teil leider nicht genauer und kann dir daher nichts genaueres sagen - aber ich denke in die richtung solltest du graben.