jQuery UI: Sortable: Klon zastępczy sortowanego elementu

Question

Mam listę, którą chcę posortować. Zrobiłem to za pomocą jQuery UI Sortable. Co chcę zrobić, to użyć niestandardowego symbolu zastępczego dla pozycji, którą element listy można upuścić. Nie mogę się zorientować, jak utworzyć element zastępczy będący klonem sortowanego elementu. Zamiast pustego symbolu zastępczego chciałbym pokazać klona sortowanego elementu, abyś mógł uzyskać rodzaj "podglądu".

W skrócie, ui.item [0] .outerHTML jest tym, co chcę użyć jako niestandardowego symbolu zastępczego, po prostu nie mogę tego zrozumieć.

<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> 

Powyższe jest to, co mam teraz, ale to nie działa oczywiście. Czy istnieje prosty sposób na zrobienie tego przy użyciu tylko do sortowania?

Answer 1

Po trochę majsterkowania (Mam inspirowane z tego related question), doszedłem do następującego rozwiązania:

W przypadku startu I klonowania oryginalnego elementu, który jest posortowany. Przekazuję klon do miejsca, w którym mogę zaktualizować jego zawartość. (Ui.item nie jest dostępna tutaj)

<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

podstawie 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>