jQuery UI: Sortierbar: Platzhalterklon des Artikels, der sortiert wird

Question

Ich habe eine Liste, die ich sortierbar machen möchte. Ich habe dies mit jQuery UI Sortable getan. Ich möchte einen benutzerdefinierten Platzhalter für die Position verwenden, die das Listenelement gelöscht werden kann. Was ich nicht herausfinden kann ist, wie man einen Platzhalter erstellt, der ein Klon des Artikels ist, der sortiert wird. Anstelle eines leeren Platzhalters möchte ich einen Klon des Artikels anzeigen, der sortiert wird, damit Sie sozusagen eine Art "Vorschau" erhalten.

Kurz gesagt, ui.item [0] .outerHTML ist, was ich als einen benutzerdefinierten Platzhalter verwenden möchte, ich kann einfach nicht scheinen, dies zu bekommen.

<script> 
    $(function() { 
    $("#menu").sortable({ 
     start: function(event,ui) { 
      console.log(ui.item[0].outerHTML); 
     }, 
     placeholder: { 
      element: function(event,ui) { 
       console.log(ui.item[0].outerHTML); 
      } 
     } 
    }); 
    $("#menu").disableSelection(); 
    }); 
    </script> 

Das obige ist, was ich jetzt habe, aber das funktioniert offensichtlich nicht. Gibt es einen einfachen Weg, dies nur mit sortierbaren zu tun?

Answer 1

Nach einem wenig Bastelei (i von diesen related question inspiriert wurde), kam ich zu folgenden Lösung:

Im Startereignis ich das ursprüngliche Element klonen, das sortiert wird. Ich übergebe den Klon an den Platzhalter, wo ich den Inhalt aktualisieren kann. (Ui.item ist hier nicht verfügbar)

<script> 
$(function() { 
    $("#menu").sortable({ 
     start: function(event, ui) { 
      clone = $(ui.item[0].outerHTML).clone(); 
     }, 
     placeholder: { 
      element: function(clone, ui) { 
       return $('<li class="selected">'+clone[0].innerHTML+'</li>'); 
      }, 
      update: function() { 
       return; 
      } 
     } 

    }); 
}); 
</script> 

Answer 2

Basierend auf https://stackoverflow.com/a/2156422/3085

<style> 
    .sortable-placeholder { 
    opacity: 0.3; 
    } 
</style> 
<script> 
    $(function() { 
    var sortableList = $('#menu'); 
    sortableList.sortable({ 
     axis: 'y', 
     revert: true, 
     scroll: false, 
     cursor: 'move', 
     placeholder: 'sortable-placeholder', 
     start: function(event, ui) { 
     ui.placeholder.html(ui.item.html()); 
     } 
    }); 
    sortableList.disableSelection(); 
    }); 
</script>