我如何 space 使用 flexbox 找出可拖动元素的原始位置？

Question

如何使用 flexbox space 找出可拖动元素的原始位置？

我已将 justify-content: space-evenly 应用于 "container1"。但是，由于绝对定位或 Javascript 可拖动定位，这看起来没有任何效果。

基本上，我想在页面加载时将这些 draggable div 元素展开，而不是堆叠起来。

这可以用 flexbox 实现吗？

这是 HTML 片段：

  <div class="container1">

    <div id="draggable1">
      <div id="draggableheader">
        <img src="https://images.unsplash.com/photo-1557912410-2e6a13bcc09e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
        <p>Drag me</p>
      </div>
    </div>

    <div id="draggable2">
      <div id="draggableheader">
        <img src="https://images.unsplash.com/photo-1595660038837-03f3832841da?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
        <p>Drag me</p>
      </div>
    </div>

    <div id="draggable3">
      <div id="draggableheader">
        <img src="https://images.unsplash.com/photo-1595515769499-0f61fc8db2e9?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
        <p>Drag me</p>
      </div>
    </div>

  </div>
  <script src="js/main.js"></script>

CSS 片段：

.container1 {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

#draggable1,
#draggable2,
#draggable3 {
  position: absolute;
}

#draggable1 img,
#draggable2 img,
#draggable3 img {
  width: 20vw;
}

#draggable1 p,
#draggable2 p,
#draggable3 p {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.15;
}

#draggableheader:hover,
#draggableheader:hover,
#draggableheader:hover {
  transform: scale(1.15);
  transition: .35s;
}

可拖动元素JavaScript:

dragElement(document.getElementById("draggable1"));
dragElement(document.getElementById("draggable2"));
dragElement(document.getElementById("draggable3"));

function dragElement(elmnt) {
    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    if (document.getElementById(elmnt.id + "header")) {
      // if present, the header is where you move the DIV from:
      document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
    } else {
      // otherwise, move the DIV from anywhere inside the DIV:
      elmnt.onmousedown = dragMouseDown;
    }
  
    function dragMouseDown(e) {
      e = e || window.event;
      e.preventDefault();
      // get the mouse cursor position at startup:
      pos3 = e.clientX;
      pos4 = e.clientY;
      document.onmouseup = closeDragElement;
      // call a function whenever the cursor moves:
      document.onmousemove = elementDrag;
    }
  
    function elementDrag(e) {
      e = e || window.event;
      e.preventDefault();
      // calculate the new cursor position:
      pos1 = pos3 - e.clientX;
      pos2 = pos4 - e.clientY;
      pos3 = e.clientX;
      pos4 = e.clientY;
      // set the element's new position:
      elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
      elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
    }
  
    function closeDragElement() {
      // stop moving when mouse button is released:
      document.onmouseup = null;
      document.onmousemove = null;
    }
  }

此外，这是 Codepen：https://codepen.io/john-szetho/pen/dyGxQdW

谢谢！

Answer 1

我使用另一个 div 作为“container1”div 的父级。所以 display flex 在那些 divs 上工作，而不是直接在你需要绝对位置的那个上工作。我还添加了一个高度，但这不应该干扰（我看到背景颜色是如何应用的）。我还向“container1”添加了 flex，但这取决于您以及您希望如何定位这些图像。所以我可以使用 flexbox 但我必须添加一些东西。希望它有所帮助，让我知道。 :)

dragElement(document.getElementById("draggable1"));
dragElement(document.getElementById("draggable2"));
dragElement(document.getElementById("draggable3"));

function dragElement(elmnt) {
    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    if (document.getElementById(elmnt.id + "header")) {
      // if present, the header is where you move the DIV from:
      document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
    } else {
      // otherwise, move the DIV from anywhere inside the DIV:
      elmnt.onmousedown = dragMouseDown;
    }
  
    function dragMouseDown(e) {
      e = e || window.event;
      e.preventDefault();
      // get the mouse cursor position at startup:
      pos3 = e.clientX;
      pos4 = e.clientY;
      document.onmouseup = closeDragElement;
      // call a function whenever the cursor moves:
      document.onmousemove = elementDrag;
    }
  
    function elementDrag(e) {
      e = e || window.event;
      e.preventDefault();
      // calculate the new cursor position:
      pos1 = pos3 - e.clientX;
      pos2 = pos4 - e.clientY;
      pos3 = e.clientX;
      pos4 = e.clientY;
      // set the element's new position:
      elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
      elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
    }
  
    function closeDragElement() {
      // stop moving when mouse button is released:
      document.onmouseup = null;
      document.onmousemove = null;
    }
  }

body {
  font-family: Helvetica, sans-serif;
  font-size: .85rem;
  font-weight: 100;
  line-height: 1;
  background-color: #f1f1f1;
  color: #313131;
  padding: .5rem;
}

h1, h2 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.15;
}

.sml {
  font-size: .85rem;
  margin-right: 2rem;
}
.container1 {
  width: 33%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container-outside {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
  justify-content: center;
  align-items: center;
}

#draggable1,
#draggable2,
#draggable3 {
  position: absolute;
}

#draggable1 img,
#draggable2 img,
#draggable3 img {
  width: 20vw;
}

#draggable1 p,
#draggable2 p,
#draggable3 p {
  text-align: center;
/*   margin-top: -1vw; */
  text-transform: uppercase;
  letter-spacing: 0.15;
}

#draggableheader:hover,
#draggableheader:hover,
#draggableheader:hover {
  -webkit-transform: scale(1.15);
          transform: scale(1.15);
  -webkit-transition: .35s;
  transition: .35s;
}

.margin-bottom {
  margin-bottom: 2rem;
}

<body>
  <h1>Draggable HTML element test</h1>
  <h2><span class="sml">¶</span>DIV id="draggable"</h2>
  <h2><span class="sml">¶</span>Nested DIV id="draggableheader"</h2>
  <h2 class="margin-bottom"><span class="sml">¶</span>Hover transform: scale 1.15 + transition time .35s</h2>
  <div class="container-outside">
    <div class="container1">
      <div id="draggable1">
        <div id="draggableheader">
          <img src="https://images.unsplash.com/photo-1557912410-2e6a13bcc09e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
          <p>Drag me</p>
        </div>
      </div>
    </div>
    <div class="container1">
      <div id="draggable2">
          <div id="draggableheader">
            <img src="https://images.unsplash.com/photo-1595660038837-03f3832841da?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
            <p>Drag me</p>
          </div>
        </div>
      </div>
    <div class="container1">
      <div id="draggable3">
        <div id="draggableheader">
          <img src="https://images.unsplash.com/photo-1595515769499-0f61fc8db2e9?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
          <p>Drag me</p>
        </div>
      </div>
    </div>
  </div>
      <script src="js/main.js"></script>
</body>

我如何 space 使用 flexbox 找出可拖动元素的原始位置？

How can I space out the native position of draggable elements using flexbox?

html

javascript

css

draggable

flexbox