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" );
      }
    });