jQuery सॉर्ट करने योग्य मूव यूपी/डाउन बटन

Question

मेरे पास वर्तमान में एक jQuery सॉर्ट करने योग्य सूची पूरी तरह से काम कर रही है। मैं चारों ओर 'ली' तत्वों को स्थानांतरित करने में सक्षम हूं। हालांकि, मैं एक विशिष्ट 'li' तत्व को ऊपर से ऊपर ले जाने के लिए एक बटन कैसे बना सकता हूं (और निश्चित रूप से नीचे बटन के विपरीत)? मैंने Google के चारों ओर देखा है और बहुत कम पाया है। यहां तक ​​कि एक लिंक शानदार होगा!

धन्यवाद!

Answer 1

तो आप निम्नलिखित है एचटीएमएल कोड:

<button id="myButtonUp">myButtonTextForUp</button> 
<button id="myButtonDown">myButtonTextForDown</button> 
<ul> 
    <li>line_1</li> 
    <li>line_2</li> 
    <li>line_3</li> 
</ul> 

मैं आप allready कुछ प्रत्येक li रों चिह्नित करने के लिए है मान लेते हैं, तो निम्न मुझे लगता चिह्नित li वर्ग markedLi है; कोड के बाद सिद्धांत में उस तत्व बढ़ना चाहिए ऊपर या नीचे (पूरी तरह अपरीक्षित पाठ्यक्रम बंद):

$('#myButtonUp').click(function(){ 
    var current = $('.markedLi'); 
    current.prev().before(current); 
}); 
$('#myButtonDown').click(function(){ 
    var current = $('.markedLi'); 
    current.next().after(current); 
}); 

Answer 2

हालांकि Azatoth द्वारा जवाब ठीक काम करता है, बॉबी, एक एनीमेशन की तलाश में हो सकता है की तरह मैंने किया था।

function moveUp(item) { 
    var prev = item.prev(); 
    if (prev.length == 0) 
     return; 
    prev.css('z-index', 999).css('position','relative').animate({ top: item.height() }, 250); 
    item.css('z-index', 1000).css('position', 'relative').animate({ top: '-' + prev.height() }, 300, function() { 
     prev.css('z-index', '').css('top', '').css('position', ''); 
     item.css('z-index', '').css('top', '').css('position', ''); 
     item.insertBefore(prev); 
    }); 
} 
function moveDown(item) { 
    var next = item.next(); 
    if (next.length == 0) 
     return; 
    next.css('z-index', 999).css('position', 'relative').animate({ top: '-' + item.height() }, 250); 
    item.css('z-index', 1000).css('position', 'relative').animate({ top: next.height() }, 300, function() { 
     next.css('z-index', '').css('top', '').css('position', ''); 
     item.css('z-index', '').css('top', '').css('position', ''); 
     item.insertAfter(next); 
    }); 
} 

आप अगर किसी को हर रिकॉर्ड वह क्या कर सकते हैं के लिए बटन को लेना पसंद है, यहाँ में http://jsfiddle.net/maziar/P2XDc/

Answer 3

@azatoth जवाब के आधार पर एक बार देख ले सकते हैं: तो मैं आंदोलन एनिमेटेड बनाने के लिए निम्नलिखित कोड लिखा था इस तरह से (अपने टैग करने योग्य टैग के साथ ली टैग को प्रतिस्थापित करें)।

HTML:

<button class="my-button-up">Up</button> 
<button class="my-button-down">Down</button> 

jQuery:

$('.my-button-up').click(function(){ 
    var current = $(this).closest('li'); 
    current.prev().before(current); 
}); 
$('.my-button-down').click(function(){ 
    var current = $(this).closest('li'); 
    current.next().after(current); 
});