JQuery UI sortable
सुविधा में एक serialize
शामिल है विधि
यह करने के लिए। यह काफी सरल है, वास्तव में। यहां एक त्वरित उदाहरण दिया गया है जो किसी तत्व की स्थिति में परिवर्तन होते ही डेटा को निर्दिष्ट URL पर भेज देता है।
$('#element').sortable({
axis: 'y',
update: function (event, ui) {
var data = $(this).sortable('serialize');
// POST to server using $.post or $.ajax
$.ajax({
data: data,
type: 'POST',
url: '/your/url/here'
});
}
});
यह क्या करता है कि यह तत्वों का उपयोग करके तत्वों की एक सरणी बनाता है id
. इसलिए, मैं आमतौर पर ऐसा कुछ करता हूं:
<ul id="sortable">
<li id="item-1"></li>
<li id="item-2"></li>
...
</ul>
जब आप serialize
. का उपयोग करते हैं विकल्प, यह इस तरह एक POST क्वेरी स्ट्रिंग बनाएगा:item[]=1&item[]=2
आदि। इसलिए यदि आप उपयोग करते हैं - उदाहरण के लिए - id
. में आपकी डेटाबेस आईडी विशेषता है, तो आप बस POSTed सरणी के माध्यम से पुनरावृति कर सकते हैं और तदनुसार तत्वों की स्थिति को अपडेट कर सकते हैं।
उदाहरण के लिए, PHP में:
$i = 0;
foreach ($_POST['item'] as $value) {
// Execute statement:
// UPDATE [Table] SET [Position] = $i WHERE [EntityId] = $value
$i++;
}