如何使用flexbox来分隔可拖动元素的本地位置

Question

如何使用flexbox来分隔可拖动元素的本地位置？

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

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

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作为"容器1"；divs。因此，display flex在那些div上工作，而不是直接在你需要绝对位置的div上工作。我还添加了一个高度，但这不应该干扰(我看到了背景色是如何应用的(。我还将flex添加到"；容器1"；但这取决于你，以及你想如何定位这些图像。因此，使用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>