How to move images left and right in front or behind another Image Jquery
<p>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.</p>

<p>e.g so say i click id=1 and i want to move it below id="3"</p>

<pre><code>    &lt;div id="image_list"&gt;
    &lt;img src="test0.png" id="1"&gt;&lt;/img&gt;
    &lt;img src="test1.png" id="2"&gt;&lt;/img&gt;
    &lt;img src="test2.png" id="3"&gt;&lt;/img&gt;
    &lt;img src="test3.png" id="4"&gt;&lt;/img&gt;
    &lt;/div&gt;

&lt;div id="move_opt"&gt;
&lt;div id="left"&gt;Move Image Left&lt;/div&gt;
&lt;div id="right"&gt;Move Image Right&lt;/div&gt;
&lt;/div&gt;


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

<p>Thank you</p>
