sortable nach drag and drop

[ralphi]

Hi,
ich möchte gerne nach dem drop eines <li> Elements. Die Elemente sortieren können.

Als Vorlage benutze ich Jquery-UI:
https://jqueryui.com/droppable/#shopping-cart
Was muss ich ergänzen, dass sortable funktioniert?

    $( "#catalog" ).accordion({ heightStyle: "content" });
    $( "#cart" ).accordion({ heightStyle: "content" });
    $( "#cart ol" ).sortable();
    $( "#cart ol" ).disableSelection();
    
    $( "#catalog li" ).draggable({
      appendTo: "body",
      helper: "clone"

      //connectToSortable: ".sortable"
    });
    $( "#cart ol" ).droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      //accept: ":not(.ui-sortable-helper)",
      
      drop: function( event, ui ) {
        $( this ).find( ".placeholder" ).remove();
        //$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
        $( "<li></li>" ).html( ui.draggable.html() ).appendTo( this );
     }

    }).sortable({
      items: "li:not(.placeholder)",
      sort: function() {
    // gets added unintentionally by droppable interacting with sortable
    // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
        $( this ).removeClass( "ui-state-default" );
      }
    });

[mark]

Hi,

ohne das dazugehöriges html+css ist eine Fehlersuche sehr schwierig. JQuery UI liefert dir ja ein schönes, funktionierendes Beispiel, das du fast 1:1 hier in's Forum kopiert hast.

Was muss ich ergänzen, dass sortable funktioniert?

Sortable ... oder besser, was ich darunter verstehe funktioniert in deinem verlinkten JQuery UI-Beispiel. So blöd mein Tipp klingen mag, so richtig ist er: der Fehler liegt in den Unterschieden zum verlinkten Beispiel. Viele Zeilen hast du ja nicht verändert.

lg

[ralphi]

Hi,

Was muss ich ergänzen, dass sortable funktioniert? Sortable ... oder besser, was ich darunter verstehe funktioniert in deinem verlinkten JQuery UI-Beispiel. So blöd mein Tipp klingen mag, so richtig ist er: der Fehler liegt in den Unterschieden zum verlinkten Beispiel. Viele Zeilen hast du ja nicht verändert.

Nun,

das Bsp ist unter 'drag and drop' bei Jquery-UI. Ein Kombibsp hab ich nicht gefunden.

Wenn ich nach laden des DOM Elemente in ein <ol>, ein <li> einfüge, kann ich mit Jquery nicht einfach so zugreifen - das ist mir klar :-(

Wenn ich Elemente auslesen will, kann ich jquery 'on' (früher 'live') benutzen. Ich weiß nur nicht, wie ich nachträglich das "sortable" einbinden kann.

[dedlfix]

Tach!

Wenn ich nach laden des DOM Elemente in ein <ol>, ein <li> einfüge, kann ich mit Jquery nicht einfach so zugreifen - das ist mir klar :-(

Warum soll das nicht gehen? Der Zeitpunkt, wann du auf Elemente zugreifst, spielt keine Rolle. Sie müssen nur da sein.

Wenn ich Elemente auslesen will, kann ich jquery 'on' (früher 'live') benutzen. Ich weiß nur nicht, wie ich nachträglich das "sortable" einbinden kann.

Du sprichst in Rätseln. on() liest doch keine Elemente aus, das setzt Event-Handler. Und beim Zugreifen auf Elemete gibt es kein "nachträglich". Sie sind entweder da oder nicht und du selektierst es oder nicht. Wenn du es eben erzeugt hast, hast du ja auch eine Referenz darauf, die du in einer Variable ablegen kannst und auf die du das sortable() anwenden kannst.

dedlfix.

[ralphi]

Hi dedlfix,

Du sprichst in Rätseln. on() liest doch keine Elemente aus, das setzt Event-Handler. Und beim Zugreifen auf Elemete gibt es kein "nachträglich". Sie sind entweder da oder nicht und du selektierst es oder nicht. Wenn du es eben erzeugt hast, hast du ja auch eine Referenz darauf, die du in einer Variable ablegen kannst und auf die du das sortable() anwenden kannst.

ich verschieb das bereits geladene Element nicht, sondern dupliziere es. Das heist, ich hab ein neues generiert. Steh wieder mal aufn Schlauch.

Ich würd ja gern die Seite mal zeigen (Portforwarding). Nur KD – Vodafon hat tatsächlich ohne Vorankündigung, einfach den WAN-zugriff seiner Kunden mit IP-Umstellung seit ca. 1 Woche blockiert.

[dedlfix]

Tach!

ich verschieb das bereits geladene Element nicht, sondern dupliziere es. Das heist, ich hab ein neues generiert.

Na und? Dann ruf auf dem neuen das sortable() auf.

$(dein_altes_element).clone().appendTo(wohin_auch_immer).sortable(konfigurationswerte);

oder auch

$neues_element = $(dein_altes_element).clone()
$neues_element.appendTo(wohin_auch_immer);
$neues_element.sortable(konfigurationswerte);

dedlfix.