如何改變這些div的順序？

我有一列divs。我試圖做到這一點，當我點擊一個給定的div，該div取代div的位置在上面或下面取決於div的位置。如果你看看結果會更好理解 - http://jsfiddle.net/SuperBoi45/vgVnj/如何改變這些div的順序？

它幾乎可以工作。注意當你點擊底部的div時，它會上升。但是當我想再次點擊那個div時，它應該會回落。但它不這樣做。請你指出我能做些什麼來完成這項工作。下面是一個快速查看代碼：

<div id="colors"> 
    <div id="red"></div> 
    <div id="blue"></div> 
    <div id="yellow"></div> 
    <div id="green"></div> 
</div>

的JavaScript：

var colors = Array.prototype.slice.call(
    $('colors').getElementsByTagName('div')); 
colors.forEach(function(e, i) { 
    colors[i].onclick = function() { 
     var a = colors[i + 1], 
      b = colors[i - 1], 
      _this = this, 
      node; 
     node = !a ? b : a; 
     this.parentNode.insertBefore(node, _this); 
    }; 
}); 

function $(id) { 
    return document.getElementById(id); 
}

如果我點擊頂部DIV，它應該往下走，並在它下面的一個地方曾經是應該上去。如果我點擊兩個中間div中的一個，它應該上升，而之前的上一個div下降。如果我點擊底部div，它應該上升。

來源

2011-08-31 0x499602D2

你可以furth呃確切地解釋所需的行爲是什麼？什麼時候應該上漲，什麼時候該下跌？ –

如果我點擊頂部div，它應該下降，下面的div應該上升到原來的位置。如果我點擊兩個中間div中的一個，它應該上升，而之前的上一個div下降。如果我點擊底部div，它應該上升。 – 0x499602D2

我剛剛給你一個使用moo工具和一些原生js的工作解決方案，你可以用moo工具等效替換 – Baz1nga

我認爲你正在尋找這個。

工作demo

$(function(){ 
    $("#colors div").click(function(){ 
     if($(this).next().length > 0){ 
      $(this).next().after(this); 
     } 
     else{ 
      $(this).parent().prepend(this); 
     } 
    }); 
});

來源

2011-08-31 17:33:12 ShankarSangoli

謝謝，但是你可以用純JavaScript編寫。我不知道是誰把jquery標籤添加到了這篇文章中。 – 0x499602D2

讓我在純JavaScript中爲你做。 – ShankarSangoli

@David - 在這裏你去http://jsfiddle.net/vgVnj/6/ – ShankarSangoli