Как я могу изменить исходное положение перетаскиваемых элементов с помощью flexbox?

Question

Как я могу изменить исходное положение перетаскиваемых элементов с помощью flexbox?

Я применил 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 как родительский для div "container1". Таким образом, гибкость дисплея работает с этими div, а не непосредственно с тем, где вам нужно, чтобы позиция была абсолютной. Я также добавил высоту, но это не должно мешать (я видел, как применяется цвет фона). Я также добавил гибкость к "container1", но это зависит от вас и того, как вы хотите расположить эти изображения. Так что это было возможно с помощью 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>