我正在做一个项目,通过拖放重新排列33网格中的图像。
当一个图像被拖放到另一个图像上时,它们
掉期头寸
我已经完成了这一部分,但我还需要在底部写一行文字,显示图像是如何重新排序的。因此,如果我交换项目1和5,文本将不再是:1,2,3,4,5,6,7,8,9,而是应该看起来像:5,2,3,4,1,6,7,8,8,9。
我真的很难在物品交换后打印新的数字订单。以下是它的外观(盒子的颜色是随机选择的,没有重要性):
这是我的代码:
//IMAGE ORDER
let order = [1, 2, 3, 4, 5, 6, 7, 8, 9]
function showOrder(order) {
document.getElementById('order').textContent = "Order: " + order.toString();
}
showOrder(order);
//DRAG AND DROP SWAP
var draggedImage = null;
var items;
function dragStart(e) {
draggedImage = this;
e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData("item", this.innerHTML);
}
function dragOver(e) {
e.preventDefault();
e.dataTransfer.dropEffect = "move";
return false;
}
function dragEnter(e) {
this.classList.add("dragover");
}
function dragLeave(e) {
this.classList.remove("dragover");
}
function drop(e) {
e.stopPropagation();
if (draggedImage != this) {
draggedImage.innerHTML = this.innerHTML;
draggedImage.setAttribute("data-item", this.innerHTML);
let replacedImage = e.dataTransfer.getData("item");
this.innerHTML = replacedImage;
this.setAttribute("data-item", replacedImage);
}
return false;
}
function dragEnd(e) {
items.forEach(function(item) {
item.classList.remove("dragover");
});
}
document.addEventListener("DOMContentLoaded", event => {
items = document.querySelectorAll(".container .image");
items.forEach(function(item) {
item.addEventListener("dragstart", dragStart);
item.addEventListener("dragenter", dragEnter);
item.addEventListener("dragover", dragOver);
item.addEventListener("dragleave", dragLeave);
item.addEventListener("drop", drop);
item.addEventListener("dragend", dragEnd);
});
});
.container {
width: 330px;
height: 330px;
background-color: lightgrey;
display: flex;
flex-wrap: wrap;
}
.image {
width: 100px;
height: 100px;
background-color: #fff5d7;
text-align: center;
line-height: 100px;
margin: 5px;
cursor: move;
}
.order {
width: 330px;
height: 50px;
background-color: lightgrey;
margin-top: 10px;
text-align: center;
line-height: 50px;
font-size: x-large;
font-family: Helvetica;
}
<div class="container">
<div draggable="true" class="image" id="1"><img src="Dummy billeder/nummer 1.png" width="100px"></div>
<div draggable="true" class="image" id="2"><img src="Dummy billeder/nummer 2.png" width="100px"></div>
<div draggable="true" class="image" id="3"><img src="Dummy billeder/nummer 3.png" width="100px"></div>
<div draggable="true" class="image" id="4"><img src="Dummy billeder/nummer 4.png" width="100px"></div>
<div draggable="true" class="image" id="5"><img src="Dummy billeder/nummer 5.png" width="100px"></div>
<div draggable="true" class="image" id="6"><img src="Dummy billeder/nummer 6.png" width="100px"></div>
<div draggable="true" class="image" id="7"><img src="Dummy billeder/nummer 7.png" width="100px"></div>
<div draggable="true" class="image" id="8"><img src="Dummy billeder/nummer 8.png" width="100px"></div>
<div draggable="true" class="image" id="9"><img src="Dummy billeder/nummer 9.png" width="100px"></div>
</div>
<div id="order"></div>
我试着找到一种方法来识别网格中两个图像的位置,然后在一个数组中交换这些数字,当一个图像被丢弃但我无法使其工作时。
