我正在使用纯 HTML、CSS 和 JavaScript 开发桌面模拟网站。我使用
display: flex但是，当我尝试将两者结合起来时，代码似乎相互干扰。目前，我可以通过拖动来选择图标，但这似乎导致了图标不再可移动的问题。如何解决此问题，以便即使在实施选择工具后图标仍可移动？我试过使用 if-else 语句来防止这种情况，但我怀疑问题可能出在我的 HTML 结构上。
有人可以看看我的代码并就我做错了什么提出建议吗？我很乐意提供更多细节或澄清任何混淆。
我已经在上面提供了 JSFiddles，但这里还有重要的代码：
HTML：
<body>
<main>
<section>
<figure id="drag1" draggable="true">
<img draggable="false" src="example.com/pic.png">
<figcaption>Icon 1</figcaption>
</figure>
</section>
<section>
<figure id="drag2" draggable="true">
<img draggable="false" src="example.com/pic.png">
<figcaption>Icon 2</figcaption>
</figure>
</section>
<section>
<figure id="drag3" draggable="true">
<img draggable="false" src="example.com/pic.png">
<figcaption>Icon 3</figcaption>
</figure>
</section>
<section>
<figure id="drag4" draggable="true">
<img draggable="false" src="example.com/pic.png">
<figcaption>Icon 4</figcaption>
</figure>
</section>
<section>
<figure id="drag5" draggable="true">
<img draggable="false" src="example.com/pic.png">
<figcaption>Icon 5</figcaption>
</figure>
</section>
<section>
<figure id="drag6" draggable="true">
<img draggable="false" src="example.com/pic.png">
<figcaption>Icon 6</figcaption>
</figure>
</section>
<section>
<figure id="drag7" draggable="true">
<img draggable="false" src="example.com/pic.png">
<figcaption>Icon 7</figcaption>
</figure>
</section>
<section>
<figure id="drag8" draggable="true">
<img draggable="false" src="example.com/pic.png">
<figcaption>Icon 8</figcaption>
</figure>
</section>
<section>
<figure id="drag9" draggable="true">
<img draggable="false" src="example.com/pic.png">
<figcaption>Icon 9</figcaption>
</figure>
</section>
<section>
<figure id="drag10" draggable="true">
</figure>
</section>
<section>
<figure id="drag11" draggable="true">
</figure>
</section>
<section>
<figure id="drag12" draggable="true">
</figure>
</section>
<section>
<figure id="drag13" draggable="true">
</figure>
</section>
......
</main>
<script src="script.js"></script>
</body>
CSS：
body, html {
height: 100%;
margin: 0;
background-image: url("images/background.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
@font-face {
font-family: 'Tahoma', sans-serif;
src: url(fonts/Tahoma\ Regular\ font.ttf);
}
* {
font-family: 'Tahoma', sans-serif;
}
.hidden {
display: none;
}
main {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
overflow: hidden;
height: 96%;
margin-bottom: 5em;
overflow: hidden;
}
section {
width: 5em;
height: 5em;
padding: 1rem;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
figcaption {
color: white;
font-size: 1em;
text-shadow: 0 .1em .1em black;
}
figure {
margin: 0;
}
figure img {
width: 4em;
height: auto;
margin-left: 0.5em;
}
figure figcaption {
text-align: center;
}
#selection {
position: absolute;
background-color: lightblue;
border: 2px solid blue;
overflow: hidden;
}
JS：
////////////////////////////////////
// DESKTOP SELECTOR //
////////////////////////////////////
let showSelection = false;
let Xstart;
let Ystart;
let selectionBox;
document.addEventListener('mousedown', function(event) {
showSelection = true;
Xstart = event.pageX;
Ystart = event.pageY;
selectionBox = document.createElement('div');
selectionBox.id = 'selection';
selectionBox.style.left = Xstart + 'px';
selectionBox.style.top = Ystart + 'px';
document.querySelector('main').appendChild(selectionBox);
});
document.addEventListener('mousemove', function(event) {
if (showSelection) {
if (event.pageX > Xstart) {
selectionBox.style.width = event.pageX - Xstart + 'px';
} else {
selectionBox.style.left = event.pageX + 'px';
selectionBox.style.width = Xstart - event.pageX + 'px';
}
if (event.pageY > Ystart) {
selectionBox.style.height = event.pageY - Ystart + 'px';
} else {
selectionBox.style.top = event.pageY + 'px';
selectionBox.style.height = Ystart - event.pageY + 'px';
}
}
});
document.addEventListener('mouseup', function(event) {
document.querySelector('#selection').remove();
showSelection = false;
});
////////////////////////////////////
// DESKTOP GRID SYSTEM //
////////////////////////////////////
const items = document.querySelectorAll("figure");
const containers = document.querySelectorAll("section");
items.forEach((item) => {
item.addEventListener("dragstart", dragStart);
item.addEventListener("dragend", dragEnd);
});
containers.forEach((container) => {
container.addEventListener("dragover", dragOver);
container.addEventListener("drop", drop);
});
function dragStart(event) {
event.dataTransfer.setData("draggedItemId", event.target.id);
setTimeout(() => event.target.classList.toggle("hidden"));
}
function dragEnd(event) {
event.target.classList.toggle("hidden");
}
function dragOver(event) {
event.preventDefault();
}
function drop(event) {
const draggedItemId = event.dataTransfer.getData("draggedItemId");
const draggedItem = document.getElementById(draggedItemId);
const fromContainer = draggedItem.parentNode;
const toContainer = event.currentTarget;
if (toContainer !== fromContainer) {
fromContainer.appendChild(toContainer.firstElementChild);
toContainer.appendChild(draggedItem);
}
}
所以：我试图重写选择工具以防止干扰可移动图标，但我怀疑问题可能出在其他地方，因为这两段代码在单独使用时都能正常运行。此外，我尝试使用 if-else 语句组合代码来确定可移动图标的优先级，以及实施 CSS 技巧以防止 #selection 工具从填充部分开始。但是，问题仍然存在。我正在寻找有关如何解决此问题的建议。