私はdiv内に5つの画像を持っていますが、div内の最初の画像になるようにクリックした画像の位置をどのように動かすことができますか？

Question

基本的に、div内の画像を1回クリックすると、クリックされた画像の位置がdiv内の最初の画像に移動し、残りの画像が1つの場所でシャッフルする必要があります。私はこれのためにjQueryを使うことはできません。

<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> 

私はJavaScriptで次のことを試してみました：

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

    } 


    }, false); 

Answer 1

単にremoveChild()を使用して、クリックされた要素を削除し、新しい要素と同じように挿入します。

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 2

は、単にその後、最初にそれを再挿入、親からクリックされた画像を切り離します。ハンドラを共有し、キーワードthisを使用してクリックした画像を特定することもできます。

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 3

最初の位置にクリックされた画像を追加します。

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

最初の位置にクリックされた画像を移動する別の方法

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>