jQuery यूआई क्रमबद्ध, अद्यतन घटना में वर्तमान स्थान और नया स्थान कैसे निर्धारित करें?

Question

मेरे पास है:

<ul id="sortableList"> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
</ul> 

मैं update: function(event, ui) { } में तार लेकिन यकीन है कि तत्व की मूल और नई स्थिति पाने के लिए नहीं कर रहा हूँ है। यदि मैं आइटम 1 को ऊपर आइटम 1 से ऊपर ले जाता हूं, तो मैं मूल स्थिति (0 आधारित इंडेक्स) और आइटम 3 की नई स्थिति होना चाहता हूं।

Answer 1

$('#sortable').sortable({ 
    start: function(e, ui) { 
     // creates a temporary attribute on the element with the old index 
     $(this).attr('data-previndex', ui.item.index()); 
    }, 
    update: function(e, ui) { 
     // gets the new and old index then removes the temporary attribute 
     var newIndex = ui.item.index(); 
     var oldIndex = $(this).attr('data-previndex'); 
     $(this).removeAttr('data-previndex'); 
    } 
}); 

Answer 2

पुरानी और नई स्थिति की जांच करने के लिए आपके पास कई संभावनाएं हैं। मैं उन्हें सरणी में डाल दूंगा।

$('#sortable').sortable({ 
    start: function(e, ui) { 
     // puts the old positions into array before sorting 
     var old_position = $(this).sortable('toArray'); 
    }, 
    update: function(event, ui) { 
     // grabs the new positions now that we've finished sorting 
     var new_position = $(this).sortable('toArray'); 
    } 
}); 

और फिर आप आसानी से जो कुछ भी चाहते हैं उसे निकाल सकते हैं।

Answer 3

मैं एक ही मुद्दे का उत्तर ढूंढ रहा था। फ्रेंकी ने जो योगदान दिया, उसके आधार पर, मैं शुरुआत और अंत दोनों "आदेश" प्राप्त करने में सक्षम था। मैं वर का उपयोग कर चर गुंजाइश के साथ एक मुद्दा था, तो मैं बस .data() के बजाय स्थानीय वार्स के रूप में उन्हें संग्रहीत:

$(this).data("old_position",$(this).sortable("toArray")) 

और

$(this).data("new_position",$(this).sortable("toArray")) 

अब

आप इसे इस तरह से कॉल कर सकते हैं (अद्यतन/अंत कार्यों से):

console.log($(this).data("old_position")) 
console.log($(this).data("new_position")) 

क्रेडिट अभी भी फ्रेंकी को जाता है :)

Answer 4

जब अद्यतन फ़ंक्शन को लागू किया जाता है तो ui.item.sortable को अद्यतन नहीं किया गया है, हालांकि UI तत्व दृष्टि से स्थानांतरित हो गया है।
यह आपको पुरानी स्थिति और नई स्थिति पाने के लिए अद्यतन फ़ंक्शन में अनुमति देता है।

$('#sortable').sortable({  
     update: function(e, ui) { 
      // ui.item.sortable is the model but it is not updated until after update 
      var oldIndex = ui.item.sortable.index; 

      // new Index because the ui.item is the node and the visual element has been reordered 
      var newIndex = ui.item.index(); 
     }  
}); 

Answer 5

यह मैं

$('#sortable').sortable({ 
start: function(e, ui) { 
    // puts the old positions into array before sorting 
    var old_position = ui.item.index(); 
}, 
update: function(event, ui) { 
    // grabs the new positions now that we've finished sorting 
    var new_position = ui.item.index(); 
} 
}); 

Answer 6

यह मेरे लिए काम करता लिए काम किया,

$('#app').sortable({ 
    handle: '.handle', 

    start: function(evt, ui){ 
     $(ui.item).data('old-ndex' , ui.item.index()); 
    }, 

    update: function(evt, ui) { 
     var old_index = $(ui.item).data('old-ndex'); 
     var new_index = ui.item.index(); 

     alert('old_index -'+old_index+' new index -'+new_index); 

    } 
});