Moving images

by nickh

HTML

<div id="image_list">
<img src="http://sstatic.net/stackoverflow/img/tag-android.png" id="a">
<img src="http://sstatic.net/stackoverflow/img/tag-android.png" id="b">
<img src="http://sstatic.net/stackoverflow/img/tag-android.png" id="c">
<img src="http://sstatic.net/stackoverflow/img/tag-android.png" id="d">
</div>

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

CSS

#a { border: 5px solid red; }
#b { border: 5px solid blue; }
#c { border: 5px solid green; }
#d { border: 5px solid orange; }
#image_list img {
    margin: 5px;  
    float: left;
}

JavaScript

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

$('#left').click(function(event){
    if (movingImage) {
        $(movingImage).insertBefore($(movingImage).prev('img'));
    }
 });
$('#right').click(function(event){
    if (movingImage) {
        $(movingImage).insertAfter($(movingImage).next('img'));
    }
});