调整大小后重新排序 div

Question

我希望我的 div 能够这样做，同时能够为动作使用过渡（例如，如果单击 div2）：

来自

[div1][div2]

[div3][div4]

-

到

[---div2----]

[div1][div3]

[div4]

到目前为止，问题在我附加的代码笔中很明显。

用我的 div 实现这一点的最佳方法是什么：

HTML

<div class="container">
 <div id="cell1" class="cell" onclick="clickFunction(this)"></div>
 <div id="cell2" class="cell" onclick="clickFunction(this)"></div>
 <div id="cell3" class="cell" onclick="clickFunction(this)"></div>
 <div id="cell4" class="cell" onclick="clickFunction(this)"></div>
 <div id="cell5" class="cell" onclick="clickFunction(this)"></div>
 <div id="cell6" class="cell" onclick="clickFunction(this)"></div>
</div>

CSS

.container{
width:300px;
}
.cell{
width:100px;
height:100px;
border:solid black 1px;
display:inline-block;
transition:background-color 1s;
}
.cell:hover{
background-color: blue;
}
.click {
background-color: green;
width:200px;
height:200px;
}

Javascript

var clickFunction = function(elem){

        if(elem.classList.contains("click")){
            elem.classList.remove("click")
        }
        else{
            var elements = document.getElementsByClassName("cell");

            for(var i = 0; i<elements.length; i++){

            if(elements[i].classList.contains("click")){
                elements[i].classList.remove("click");

            }
            }
            elem.classList.add("click");
        }
    }

codepen

So far

Answer 1

查看下面的代码。我用过弹性。

var clickFunction = function(elem){

        if(elem.classList.contains("click")){
            elem.classList.remove("click")
        }
        else{
            var elements = document.getElementsByClassName("cell");

            for(var i = 0; i<elements.length; i++){

            if(elements[i].classList.contains("click")){
                elements[i].classList.remove("click");

            }
            }
            elem.classList.add("click");
        }
    }

.container{
  width:300px;
  display: flex;
  flex-wrap: wrap;
}
.cell{
  width:100px;
  height:100px;
  border:solid black 1px;
  display:inline-block;
  transition:background-color 1s;
  order: 2;
  
}
.cell:hover{
  background-color: blue;
}
.click {
  background-color: green;
  width:200px;
  order: 1;
}

<div class="container">
  <img class="cell" src="http://www.placehold.it/300x300?text=Cell 1" onclick="clickFunction(this)">
  <img class="cell" src="http://www.placehold.it/300x300?text=Cell 2" onclick="clickFunction(this)">
  <img class="cell" src="http://www.placehold.it/300x300?text=Cell 3" onclick="clickFunction(this)">
  <img class="cell" src="http://www.placehold.it/300x300?text=Cell 4" onclick="clickFunction(this)">
</div>

Answer 2

您已经在使用 Javascript，所以您不妨用它重新排序。可能有一些方法可以使用纯 HTML / CSS3 来实现这一点。 （参见@izulito 的更快答案：）

var clickFunction = function(elem) {
  if (elem.classList.contains("click")) {
    elem.classList.remove("click");
    var pos = parseInt(elem.getAttribute("data-num"));
    var nodeAfter = document.querySelector("cell[data-num='" + (pos + 1) + "]'");
    elem.parentNode.insertBefore(elem, nodeAfter);
  } else {
    var oldSelection = document.querySelector(".cell.click");
    if (oldSelection) {
      oldSelection.classList.remove("click");
    }
    elem.classList.add("click");
    var nodeAfter = elem.parentNode.firstChild;
    elem.parentNode.insertBefore(elem, nodeAfter);
  }
};

.container {
  width: 300px;
}
.cell {
  border: solid black 1px;
  display: inline-block;
  height: 100px;
  margin-left: 5px;
  transition: background-color 1s;
  width: 100px;
}
.cell:hover {
  background-color: blue;
}
.click {
  background-color: green;
  height:200px;
  width:200px;
}

<div class="container"><div data-num="1" class="cell" onclick="clickFunction(this)"></div><div data-num="2" class="cell" onclick="clickFunction(this)"></div><div data-num="3" class="cell" onclick="clickFunction(this)"></div><div data-num="4" class="cell" onclick="clickFunction(this)"></div><div data-num="5" class="cell" onclick="clickFunction(this)"></div><div data-num="6" class="cell" onclick="clickFunction(this)"></div></div>