我正在尝试制作一个3x3网格,每个网格项都是1图像的一部分。我希望能够将这些项目拖放到另一个 3x3 网格内。(以我想要的任何顺序)。
我遇到了障碍,并且已经尝试解决它有一段时间了。
目录树:
.
├── Project/
│ └── Res/
│ ├── Media/
│ │ └── Images/
│ │ └── image.jpg
│ ├── Scripts/
│ │ └── anim3.js
│ ├── Styles/
│ │ └── anim3.css
│ └── Pages/
│ └── animPage3.html
└── index.html(not relevant)
animPage3.html:
<body>
<head>
<link
rel="stylesheet" href="Res/Styles/anim3.css">
</head>
<div class="draggable-grid">
<div class="box" draggable="true"></div>
...There's a total of 9 these...
</div>
<div class="droppable-grid">
<div class="droppable-box"></div>
<!--There's a total of 9 of these "droppable-box" divs-->
</div>
<script src="Res/Scripts/anim3.js">
</body>
anim3.css:
.grid-cont {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.draggable-grid, .droppable-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
}
.box {
width: 100px;
height: 100px;
background-image: url('../Media/Images/image.jpg');
background-size: 300% 300%;
}
.droppable-box {
border: 2px dashed #ccc;
height: 100px;
}
anim3.js:
const draggableBoxes = document.querySelectorAll('.draggable-grid .box');
const droppableBoxes = document.querySelectorAll('.droppable-grid .droppable-box');
draggableBoxes.forEach(box => {
box.addEventListener('dragstart', dragStart);
});
droppableBoxes.forEach(droppableBox => {
droppableBox.addEventListener('dragover', dragOver);
droppableBox.addEventListener('dragenter', dragEnter);
droppableBox.addEventListener('dragleave', dragLeave);
droppableBox.addEventListener('drop', drop);
});
let draggedItem = null;
function dragStart() {
draggedItem = this;
setTimeout(() => this.style.display = 'none', 0);
}
function dragOver(e) {
e.preventDefault();
}
function dragEnter(e) {
e.preventDefault();
this.classList.add('hovered');
}
function dragLeave() {
this.classList.remove('hovered');
}
function drop() {
this.classList.remove('hovered');
this.append(draggedItem);
draggedItem.style.display = 'block';
draggedItem = null;
}
我尝试注释掉
//setTimeout(() => this.style.display = 'none', 0);
这并没有使拖动起作用。
我想要代码做什么: 制作两个 3×3 的网格。 第一个网格有可拖动项目,项目背景都是“1图像*的一部分。 “第二个网格*是我希望能够在9个盒子中的任何一个掉落物品。
使用
this
有点令人困惑。请改用 e.target
。然后为父元素创建事件监听器,并测试 e.target
是否是正确的元素。
const draggableGrid = document.querySelector('.draggable-grid');
const droppableGrid = document.querySelector('.droppable-grid');
draggableGrid.addEventListener('dragstart', dragStart);
droppableGrid.addEventListener('dragover', dragOver);
droppableGrid.addEventListener('dragenter', dragEnter);
droppableGrid.addEventListener('dragleave', dragLeave);
droppableGrid.addEventListener('drop', drop);
let draggedItem = null;
function dragStart(e) {
draggedItem = e.target;
setTimeout(() => draggedItem.style.display = 'none', 0);
}
function dragOver(e) {
e.preventDefault();
}
function dragEnter(e) {
e.preventDefault();
if (e.target.classList.contains('droppable-box')) {
e.target.classList.add('hovered');
}
}
function dragLeave(e) {
e.target.classList.remove('hovered');
}
function drop(e) {
if (e.target.classList.contains('droppable-box')) {
e.target.classList.remove('hovered');
e.target.append(draggedItem);
draggedItem.style.display = 'block';
draggedItem = null;
}
}
.grid-cont {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.draggable-grid,
.droppable-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
}
.box {
width: 100px;
height: 100px;
background-color: orange;
}
.droppable-box {
border: 2px dashed #ccc;
height: 100px;
}
.hovered {
border-style: solid;
}
<div class="draggable-grid">
<div class="box" draggable="true">1</div>
<div class="box" draggable="true">2</div>
<div class="box" draggable="true">3</div>
<div class="box" draggable="true">4</div>
<div class="box" draggable="true">5</div>
<div class="box" draggable="true">6</div>
<div class="box" draggable="true">7</div>
<div class="box" draggable="true">8</div>
<div class="box" draggable="true">9</div>
</div>
<div class="droppable-grid">
<div class="droppable-box"></div>
<div class="droppable-box"></div>
<div class="droppable-box"></div>
<div class="droppable-box"></div>
<div class="droppable-box"></div>
<div class="droppable-box"></div>
<div class="droppable-box"></div>
<div class="droppable-box"></div>
<div class="droppable-box"></div>
</div>