फॉर्म पर JQuery-UI सॉर्ट करने योग्य सॉर्ट सबमिट करें

Question

छवियां डेटाबेस से लोड की गई हैं। मैं JQuery-UI सॉर्ट करने योग्य का उपयोग कर छवि ऑर्डर को सॉर्ट करना चाहता हूं और फॉर्म सबमिट करने पर डेटा को सहेजना चाहता हूं।

<script type="text/javascript"> 
    $(function() { 
     $("#sortable").sortable({ 
      placeholder: "ui-state-highlight", 
      cursor: 'crosshair' 
    }); 
     $("#sortable").disableSelection(); 
}); 
</script> 

---

<form action="" method="post"> 
<ul id="sortable" style="width: 524px;"> 
    <li id="00001" class="ui-state-default"><img src="00001.jpg" width="100" height="90" /></li> 
    <li id="00002" class="ui-state-default"><img src="00002.jpg" width="100" height="90" /></li> 
    <li id="00003" class="ui-state-default"><img src="00003.jpg" width="100" height="90" /></li> 
    <li id="00003" class="ui-state-default"><img src="00004.jpg" width="100" height="90" /></li> 
</ul> 
<div style="clear:both;"></div> 
<input name="Submit" value="RE-ORDER" type="submit" /> 
</form> 

Answer 1

यहाँ मेरी सोच

एक छिपा इनपुट बना सकते हैं और इसे में अपने आदेश की दुकान के अनुसार एक बुनियादी समाधान है।

<script type="text/javascript"> 
    $(function() { 
     $("#sortable").sortable({ 
      placeholder: "ui-state-highlight", 
      cursor: 'crosshair', 
      update: function(event, ui) { 

     var Order = $("#sortable").sortable('toArray').toString(); 
     $('#order').val(Order); 
} 
    }); 
     $("#sortable").disableSelection(); 
}); 
</script> 

<form action="" method="post"> 
<ul id="sortable" style="width: 524px;"> 
    <li id="00001" class="ui-state-default"><img src="00001.jpg" width="100" height="90" /></li> 
    <li id="00002" class="ui-state-default"><img src="00002.jpg" width="100" height="90" /></li> 
    <li id="00003" class="ui-state-default"><img src="00003.jpg" width="100" height="90" /></li> 
    <li id="00003" class="ui-state-default"><img src="00004.jpg" width="100" height="90" /></li> 
</ul> 
<div style="clear:both;"></div> 
<input name="order" type="hidden" /> 
<input name="Submit" value="RE-ORDER" type="submit" /> 
</form> 

अब आप order से ऑर्डर प्राप्त कर सकते हैं।

Answer 2

जब आप प्रत्येक बार सॉर्ट करते हैं, तो क्रमशः update: function(){} का उपयोग करके छुपे हुए इनपुट फ़ील्ड में मान अपडेट करें। यहां मेरा कोड है जो हर बार सॉर्ट करते समय छुपा इनपुट अपडेट करता है। जब फॉर्म सबमिट किया जाता है, तो मान सर्वर पर भेजे जाएंगे।

<form action="" method="post"> 
    <input type="hidden" id="image_order" name="image_order" value="" /> 
<ul id="sortable" style="width: 524px;"> 
    <li id="00001" class="ui-state-default"><img src="00001.jpg" width="100" height="90" /></li> 
    <li id="00002" class="ui-state-default"><img src="00002.jpg" width="100" height="90" /></li> 
    <li id="00003" class="ui-state-default"><img src="00003.jpg" width="100" height="90" /></li> 
    <li id="00003" class="ui-state-default"><img src="00004.jpg" width="100" height="90" /></li> 
</ul> 
<div style="clear:both;"></div> 
<input name="Submit" value="RE-ORDER" type="submit" /> 
</form>​ 


$(function() { 
     $("#sortable").sortable({ 
      placeholder: "ui-state-highlight", 
      cursor: 'crosshair', 
      update: function(event, ui) { 
       var order = $("#sortable").sortable("toArray"); 
       $('#image_order').val(order.join(",")); 
       alert($('#image_order').val()); 
      } 
    }); 
     $("#sortable").disableSelection(); 
});​ 

यहां demo है।