JQuery user interface: Sort: Sort a cluster to sort an item

Question

I have a list that I want to make sortable. I did this using jQuery UI Sortable. I want to use a custom placeholder for the position that the list item can be discarded. I cannot figure out how to create a placeholder that is a clone of the element to be sorted. Instead of an empty placeholder, I would like to show the cloned object to be sorted, so you get a kind of “preview”, so to speak.

In short, ui.item [0] .outerHTML is what I want to use as a custom placeholder, I just can't figure it out.

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

Above was what I have now, but it does not work. Is there an easy way to do this with just sortable ones?

Answer 1

After messing around a bit (I got inspiration from this related question ), I came to the following solution:

In the start event, I clone the source element that is sorted. I pass the clone to a place where I can update its contents. (ui.item is not available here)

 <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

Based on fooobar.com/questions/118243 / ...

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