如何左右移動圖像在前面或後面圖像Jquery

Question

我有一個圖像列表，我需要能夠將它們左右移動（可排序）在jQuery中。我知道我需要使用兒童選擇器，但是有人可能會讓我走上正確的道路，以便讓這項工作順利進行。

e.g這麼說我點擊ID = 1，我想把它移到下面的id = 「3」

<div id="image_list"> 
    <img src="test0.png" id="1"></img> 
    <img src="test1.png" id="2"></img> 
    <img src="test2.png" id="3"></img> 
    <img src="test3.png" id="4"></img> 
    </div> 

<div id="move_opt"> 
<div id="left">Move Image Left</div> 
<div id="right">Move Image Right</div> 
</div> 


$('#image_list').live('click', function() { 
    var img_class = $(this).attr("class"); 
    var img_src = this.src; 
    $('#img_prop').css("display","block"); 
    $('#pre_img').html("<img src='"+img_src+"'></img>"); 
}); 

謝謝

Answer 1

$(function(){ 
    var movingImage = null; 
    $('#image_list img').click(function(event) { 
     movingImage = event.target; 
    }); 

    // DOM ensures an element only exists once in a document, so 
    // you can just insert it before or after the next or previous 
    // image. 
    $('#left').click(​function(event){ 
     if (movingImage) { 
      $(movingImage).insertBefore($(movingImage).prev('img')); 
     } 
    }); 
    $('#right').click(function(event){ 
     if (movingImage) { 
      $(movingImage).insertAfter($(movingImage).next('img')); 
     } 
    }); 
}); 

這裏有一個演示：

http://jsfiddle.net/nickh/Bv4xX/

Answer 2

你想實現拖放？請參閱jQuery UI Draggable and Sortable documentaion。

或可點擊的滾動條？見一例中的一，我在這裏提出：http://jsbin.com/abape3

Answer 3

看到這個例子。您可以將輸入元素更改爲圖像或任何其他元素。

http://jsbin.com/abape3/10/