Question

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

从

[DIV1] [DIV2]

[DIV3] [DIV4]

-

以

[--- DIV2 ----]

[DIV1] [DIV3]

[DIV4]

到目前为止的问题在我附上的codepen中很明显。

使用我的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

查看下面的代码。我用过flex。

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更快的答案：）

＆＃13;

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);
  }
};

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

调整大小后重新排序div

2 个答案: