I have 5 images inside a div, and how can i move the position of a clicked image so that it moves to become the very first image inside the div?

Question

Basically, when an image inside the div is clicked once, the clicked image's position needs to move to become the very first image inside the div, and the rest of the images have to shuffle over one spot. I can't use jQuery for this.

    <div>
        <img src="images/yellow.jpg">
        <img src="images/blue.jpg">
        <img src="images/red.jpg">
        <img src="images/green.jpg">
        <img src="images/black.jpg">
    </div>

I tried the following in javascript:

    document.addEventListener('click', function() {
        for(var i = 0; i < document.images.length; i++) {
            //what code here?    

    }


    }, false);

Answer 1

Simply detach the clicked image from parent, then reinsert it at the beginning. You can also share handler and use the keyword this to identify the clicked image.

 var img = document.querySelectorAll("img"); for(var i = 0; i < img.length; i++) img[i].addEventListener("click", clickHandler); function clickHandler() { var parent = this.parentNode; // ref. parent for later parent.removeChild(this); // remove clicked image from DOM parent.insertBefore(this, parent.firstChild); // reinsert clicked image first } 

 <div style="font-size:0"> <img src="http://lorempixel.com/64/64?1"> <img src="http://lorempixel.com/64/64?2"> <img src="http://lorempixel.com/64/64?3"> <img src="http://lorempixel.com/64/64?4"> <img src="http://lorempixel.com/64/64?5"> </div> 

Answer 2

Simply remove the clicked element using removeChild() and insert the same as new element.

 var img_wrapper = document.getElementById('img_wrapper'); var el = img_wrapper.getElementsByTagName('img'); for(var i = 0; i < el.length; i++) { el[i].addEventListener("click", shuffleImages); } function shuffleImages(e) { var selected_img = e.target; img_wrapper.removeChild(selected_img); img_wrapper.insertBefore(selected_img, img_wrapper.firstChild); } 

 <div id="img_wrapper"> <img src="http://via.placeholder.com/100x100&&text=1" /> <img src="http://via.placeholder.com/100x100&&text=2" /> <img src="http://via.placeholder.com/100x100&&text=3" /> <img src="http://via.placeholder.com/100x100&&text=4" /> <img src="http://via.placeholder.com/100x100&&text=5" /> </div> 

Answer 3

Append the clicked image to first position.

https://jsfiddle.net/vineeshmp/ndndhc9j/

 <div id="container">
     <img src="http://4.bp.blogspot.com/-M7FEplJcjOM/UE0-vV3HUcI/AAAAAAAAEBA/-nTyQ8spBJc/s1600/Number-One.png" width="100" height="100">
     <img src="https://upload.wikimedia.org/wikipedia/commons/f/f7/MetroDF_Linea_2.jpg" width="100" height="100">
     <img src="http://www.hotel-r.net/im/hotel/gb/number-three-20.png" width="100" height="100">
     <img src="http://1.bp.blogspot.com/-mFRbag9oIwM/URcr_79sUtI/AAAAAAAAIFA/ezJStcA1ZpM/s320/4.jpg" width="100" height="100">
 </div>

document.addEventListener('click', function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement; 
    var container  = document.getElementById("container");
    container.insertBefore(target, container.firstChild);
}, false);

Answer 4

another way to move clicked image to first position

 document.querySelectorAll('img').forEach(function(item) { item.addEventListener('click', function() { var imgs = document.querySelectorAll('img'); firstimg = imgs[0].src; for(var i = 1; i < imgs.length; i++) { if(imgs[i].src == this.src) { imgs[0].src = this.src; imgs[i].src = firstimg; } } }, false); }); 

 <div> <img src="http://lorempixel.com/64/64?1"> <img src="http://lorempixel.com/64/64?2"> <img src="http://lorempixel.com/64/64?3"> <img src="http://lorempixel.com/64/64?4"> <img src="http://lorempixel.com/64/64?5"> </div>