2x2網格上正確的div貼裝難度

Question

這是一個學校項目。製作2x2網格，其中3張圖片和圖片應該能夠從「框到框」移動。除了較低的2格外，其他所有內容都是按順序排列的。

排名前2的排名非常接近，但在嘗試排名第二的時候，排在第一排的旁邊（排在前面，因此排名稍低），或者排在前面在第一個2.我知道這不是一件大事，我錯過了，但我似乎無法弄清楚。

#loota { 
 
    float: left; 
 
    width: 200px; 
 
    height: 283px; 
 
    border: 2px solid #aaaaaa; 
 
} 
 
#loota2 { 
 
    float: left; 
 
    width: 200px; 
 
    height: 283px; 
 
    border: 2px solid #aaaaaa; 
 
}

<div id="loota" ondrop="tiputus(event)" ondragover="siirto(event)"> 
 
    <img id="kuva1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Placeholder&w=200&h=283" draggable="true" ondragstart="veto(event)" width="200" height="283"> 
 
</div> 
 

 

 
<div id="loota" ondrop="tiputus(event)" ondragover="siirto(event)"> 
 
    <img id="kuva2" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Placeholder&w=200&h=283" draggable="true" ondragstart="veto(event)" width="200" height="283"> 
 
</div> 
 
<br> 
 
<div id="loota2" ondrop="tiputus(event)" ondragover="siirto(event)"> 
 
    <img id="kuva3" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Placeholder&w=200&h=283" draggable="true" ondragstart="veto(event)" width="200" height="283"> 
 
</div> 
 

 
<div id="loota" ondrop="tiputus(event)" ondragover="siirto(event)"></div>

Answer 1

的2x2grid可以使用CSS nth運營商來創建。

拖放可以在各個圖像來進行與類和操作功能：

(function closedScopeForDragAndDropImages() { 
 
    var dragTarget = null; 
 

 
    window.addEventListener("dragover", function(event) { 
 
    // prevent default to allow drop 
 
    event.preventDefault(); 
 
    }, false); 
 

 
    window.addEventListener("drag", function(event) { 
 
    if (event.target.className == "dropable-image") { 
 
     dragTarget = event.target; 
 
    } 
 
    // prevent default to allow drop 
 
    event.preventDefault(); 
 
    }, false); 
 

 
    window.addEventListener("drop", function(event) { 
 
    // prevent default action (open as link for some elements) 
 
    event.preventDefault(); 
 
    // move dragged elem to the selected drop target 
 
    if (event.target.className == "dropable-image") { 
 
     var src = dragTarget.getAttribute("src"); 
 
     dragTarget.setAttribute("src", event.target.getAttribute("src")); 
 
     event.target.setAttribute("src", src) 
 
    } 
 
    }, false); 
 
})();

.tile { 
 
    float: left; 
 
    width: 200px; 
 
    height: 283px; 
 
    border: 2px solid #aaaaaa; 
 
} 
 
.tile:nth-child(2n+3) { 
 
    clear: left; 
 
}

<div class="tile"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Placeholder1&w=200&h=283" class="dropable-image" draggable="true" /> 
 
</div> 
 
<div class="tile"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Placeholder2&w=200&h=283" class="dropable-image" draggable="true" /> 
 
</div> 
 
<div class="tile"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Placeholder3&w=200&h=283" class="dropable-image" draggable="true" /> 
 
</div> 
 
<div class="tile"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Placeholder4&w=200&h=283" class="dropable-image" draggable="true" /> 
 
</div>