jQuery यूआई: सॉर्ट करने योग्य: आइटम का प्लेसहोल्डर क्लोन सॉर्ट किया जा रहा है

Question

मेरे पास एक सूची है जिसे मैं क्रमबद्ध बनाना चाहता हूं। मैंने jQuery यूआई सॉर्ट करने योग्य का उपयोग कर ऐसा किया है। मैं जो करना चाहता हूं वह सूची आइटम को छोड़ने की स्थिति के लिए एक कस्टम प्लेसहोल्डर का उपयोग करना है। मैं यह नहीं समझ सकता कि प्लेसहोल्डर को कैसे बनाया जाए, जो कि सॉर्ट किए जा रहे आइटम का क्लोन है। एक खाली प्लेसहोल्डर के बजाय, मैं सॉर्ट किए जा रहे आइटम का एक क्लोन दिखाना चाहता हूं ताकि आपको बोलने के लिए एक 'पूर्वावलोकन' मिल जाए।

संक्षेप में, ui.item [0] .उटरएचटीएमएल मैं एक कस्टम प्लेसहोल्डर के रूप में उपयोग करना चाहता हूं, मुझे बस यह प्रतीत नहीं होता है।

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

उपरोक्त मेरे पास अब है, लेकिन यह स्पष्ट रूप से काम नहीं करता है। क्या यह केवल क्रमबद्ध के साथ करने का कोई आसान तरीका है?

शुरू घटना मैं मूल आइटम है कि हल कर किया जा रहा क्लोन में:

Answer 1

संवारता (मैं इस related question से प्रेरित हुआ) का एक सा के बाद, मैं निम्नलिखित समाधान के लिए आया था। मैं क्लोन को प्लेसहोल्डर पर पास करता हूं जहां मैं इसकी सामग्री अपडेट कर सकता हूं। (Ui.item यहां उपलब्ध नहीं है)

<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

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> 

के आधार पर