How to move images left and right in front or behind another Image Jquery

Question

i have a list of images i need to be able to move them left and right (sortable) in jquery. I know I need to use Child Selector but can someone lead me down the right path to getting this working please.

e.g so say i click id=1 and i want to move it below 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>");
}); 

Thank you

Answer 1

are you wanting to implement drag and drop? see the jQuery UI Draggable and Sortable documentaion.

or a clickable scroller? See an example one that I made here: http://jsbin.com/abape3

Answer 2

$(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'));
        }
    });
});

Here's a demo:

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

Answer 3

See this example. you can change the input elements to images or any other elements.

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