JQuery क्रमित करने योग्य सेट एक सूचकांक करने के लिए आइटम को प्रोग्राम के

Question

मैं एक JQuery sortable इसलिए की तरह (1.7.1 यदि आवश्यक हो तो बदल सकते हैं) सूची है:

<ul id='pl'> 
    <li class='item'>1</li> 
    <li class='item locked'>2</li> 
    <li class='item'>3</li> 
    <li class='item'>4</li> 
    <li class='item'>5</li> 
</ul> 

दूसरे मद लॉक किया गया है इसलिए ले जाया जा सकता है अगर आइटम 5 की कोशिश की है स्लॉट 2 में यह स्लॉट 3 में जाएगा और यदि स्लॉट 1 में स्थानांतरित करने की कोशिश की जाती है तो स्लॉट 1 में मौजूदा आइटम 3 से गिर जाता है और आइटम 5 1 तक जाता है।

कार्यान्वयन तर्क आसान है लेकिन मुझे क्या पता होना चाहिए अगर वहां वस्तुओं को स्थानांतरित करने का कोई प्रोग्रामेटिक तरीका है जिसमें एनिमेशन शामिल होंगे।

क्या यह पहले से ही Moving an item programmatically with jQuery sortable while still triggering events मिला है लेकिन यह सुनिश्चित नहीं है कि 'sortupdate' घटना ड्रैग और ड्रॉप को अनुकरण करेगी या यदि यह भी काम करेगी?

Answer 1

jQuery के सॉर्ट करने योग्य स्रोत कोड पर त्वरित रूप से देखने के बाद ऐसा प्रतीत नहीं होता है कि इस तरह की कार्यक्षमता इस बिंदु पर बनाई गई है (मुझे लगता है कि इसमें एक अच्छा जोड़ा होगा)। किसी भी तरह, एक त्वरित समाधान का मैं मामले किसी में अब के लिए इस्तेमाल कभी एक ही मुद्दा है:

 $el.fadeOut(1000, function(){ 
      $el.insertAfter($el.next()); 

      $el.fadeIn(1000); 
     }); 

यह कुछ हद तक स्पष्ट रूप से एक आइटम एक स्थान से दूसरे में जाने का संकेत है।

अगर कोई भी एक ही मुद्दे पर आता है तो उपर्युक्त समस्या का पूरा कोड यहां दिया गया है।

1- रजिस्टर तो जैसे क्रमित करने योग्य init में इन 2 घटनाओं:

start: function(event,ui){$(ui.item).data('initialPos', $(ui.item).offset().top)}, 
handle: ".drag", 
stop: lockedRearrange, 

2-

var lockedRearrange = function(event, ui){ 

    //block ordering while the current item is rearranged 
    $('.drag', event.target).removeClass('drag').addClass('blockdrag'); 

    var $el = $(ui.item); 
    var directionUp = (ui.absolutePosition.top < $el.data('initialPos')) ? true : false ; 

    _rearrange($el, directionUp, $el.data('initialPos')); 
}; 

var _rearrange = function($el, directionUp, initialPos){ 
    if ($el.offset().top == initialPos) { 
     $('.blockdrag', $el.parent()).removeClass('blockdrag').addClass('drag'); 
     return; 
    } 

    var $knockEl = (directionUp) ? $el.next() : $el.prev(); 

    if ($knockEl.hasClass('locked')) { 
     $el.fadeOut(1000, function(){ 
      (directionUp) ? $el.insertAfter($knockEl) : $el.insertBefore($knockEl); 

      $el.fadeIn(1000, function(){ 
       _rearrange($el, directionUp, initialPos); 
      }); 
     }); 
    }else 
     _rearrange($knockEl, directionUp, initialPos); 
}; 

Answer 2

यह पूरी तरह से काम किया।

चरणों का पालन करें और इस में शामिल हैं:

$el.fadeOut(1000, function(){ 
     $el.insertAfter($el.next()); 

     $el.fadeIn(1000); 
    }); 

की तरह इस (बेशक ली टैग की आईडी की स्थापना):

jQuery(".templateMoveUp").on("click", function(){ 
    $el = jQuery("#" + $(this).attr("id") + "_logTemplate"); 
    $el.fadeOut(1000, function(){ 
     $el.insertBefore($el.prev()); 
     $el.fadeIn(1000); 
    }); 
}); 
jQuery(".templateMoveDown").on("click", function(){ 
    $el = jQuery("#" + $(this).attr("id") + "_logTemplate"); 
    $el.fadeOut(1000, function(){ 
     $el.insertAfter($el.next()); 
     $el.fadeIn(1000); 
    }); 
});