我正在開發一個涉及拖放的簡單游戲（類似于 Blockly 和 Scratch）。目前，我可以將按鈕拖動到目標容器。但是，按鈕會完全轉移到另一個容器。我想要實作的是類似于復制粘貼 - 從一個容器到另一個容器（基本上是拖動和復制）。我知道我必須克隆它并給它一個新的 ID，但無濟于事。
以下是相關代碼：HTML 和 JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Game</title>
<link href="{{ url_for('static',filename='css/playmaze.css') }}" rel="stylesheet">
</head>
<body id="page-top">
<div id="wrapper">
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordion_sidebar">
<a class="sidebar-brand d-flex align-items-center justify-content-center">
<div class="sidebar-brand-icon rotate-n-15"><i class="fas fa-laugh-wink"></i></div>
<div class="sidebar-brand-text mx-3">Directions</div>
</a>
<form action="/" method="post">
<div class="directions">
<input type="button" class="draggable" id="forward" value="Forward" draggable="true"></button>
<input type="button" class="draggable" id="backward" value="Backward" draggable="true"></button>
<input type="button" class="draggable" id="right" value="Right" draggable="true"></button>
<input type="button" class="draggable" id="left" value="Left" draggable="true"></button>
<input type="button" class="draggable" id="repeat" value="Repeat" draggable="true"></button>
</div>
</form>
</ul>
<div id="content-wrapper" class="d-flex flex-column">
<div id="content">
<div class="container-fluid">
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card shadow mb-4">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h2 class="m-0 font-weight-bold text-primary" id="maze_name">Maze</h2>
</div>
<div class="card-body">
<div class="container">
</div>
<input type="reset" id="reset" class="btn btn-lg btn-primary" value="Reset"></button>
<input type="submit" id="run" class="btn btn-lg btn-primary" value="Run"></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
const draggables = document.querySelectorAll('.draggable')
const containers = document.querySelectorAll('.container')
// loop through each of the draggables (aka buttons)
draggables.forEach(draggable => {
draggable.addEventListener('dragstart', () => {
console.log('drag start')
draggable.classList.add('dragging')
})
draggable.addEventListener('dragend', () => {
draggable.classList.remove('dragging')
})
})
containers.forEach(container => {
container.addEventListener('dragover', e => {
// by default, dropping inside an element is disabled
e.preventDefault()
// return of the getDragAfterElement function
// e.clientY = y position of the mouse on the screen
const afterElement = getDragAfterElement(container, e.clientY)
// get the element you are currently dragging
const draggable = document.querySelector('.dragging')
// clone the dragged element
const draggableClone = document.getElementById(draggable).cloneNode(true)
// give new ID
draggableClone.id = "cloneId"
if (afterElement == null) {
// append the element that is currently being dragged
container.appendChild(draggableClone)
} else {
container.insertBefore(draggableClone, afterElement)
}
})
})
// determine the mouse position when dragging elements and
// return whichever element our mouse position is directly after
function getDragAfterElement(container, y) {
// array
const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')]
// reduce -> loop through the list of draggableElements and determine
// which single element is directly after the mouse based on the y position (retrieved from the event)
return draggableElements.reduce((closest, child) => {
const box = child.getBoundingClientRect()
const offset = y - box.top - box.height / 2
if (offset < 0 && offset > closest.offset) {
return { offset: offset, element: child }
} else {
return closest
}
}, { offset: Number.NEGATIVE_INFINITY }).element
}
</script>
</html>
CSS：
.container
{
background-color: #ffeaf0;
padding: 1rem;
flex-direction: column;
display: flex;
align-content: center;
}
.draggable
{
padding: 1rem;
margin-bottom: 1rem;
background-color: white;
border: 1px solid black;
cursor: move;
border-radius: 1rem;
}
.draggable.dragging
{
opacity: .5;
}
.grid-wrapper
{
display: grid;
padding: 0px;
margin: 0px;
grid-template-columns: repeat(5, 100px);
grid-template-rows: repeat(5, 100px);
}
.grid-item
{
background-color: rgba(255, 255, 255, 0.8);
border: 2px solid rgb(139,69,19);
padding: 20px;
font-size: 30px;
text-align: center;
}
.directions {
flex-direction: column;
display: flex;
align-content: center;
padding: 0px;
margin: 0px 20px 10px 20px;
}
.btn-lg {
margin-bottom: 10px;
}
#forward {
background-color: #98e690;
border:#98e690;
color: #404040;
}
#backward {
background-color: #ff85a2;
border: #ff85a2;
color: #404040;
}
#right {
background-color: #92dff3;
border: #45b3e0;
color: #404040;
}
#left {
background-color: #fdfd96;
border: #fdfd96;
color: #404040;
}
#repeat {
background-color: #CC99FF;
border: #CC99FF;
color: #202020;
}
#reset {
background-color: black;
border: #CC99FF;
color: white;
margin-top: 30px;
margin-right: 10px;
width: 6rem;
}
#run {
background-color: #32CD32;
border: #32CD32;
color: white;
margin-top: 30px;
width: 6rem;
}
uj5u.com熱心網友回復：
您需要克隆拖動的 html 元素：
所以你的代碼應該是：
const draggables = document.querySelectorAll(".draggable");
const containers = document.querySelectorAll(".container");
let currentDraggableClone = null;
let currentAfterElement = null;
let currentContainer = null;
// loop through each of the draggables (aka buttons)
draggables.forEach((draggable) => {
draggable.addEventListener("dragstart", () => {
console.log("drag start");
draggable.classList.add("dragging");
});
draggable.addEventListener("dragend", () => {
if (currentContainer === null || currentDraggableClone === null) return;
//Random ID
currentDraggableClone.id =
currentDraggableClone.id Math.random() * 100000000;
if (currentAfterElement == null) {
// append the element that is currently being dragged
currentContainer.appendChild(currentDraggableClone);
} else {
currentContainer.insertBefore(currentDraggableClone, currentAfterElement);
}
currentDraggableClone.classList.remove("dragging");
draggable.classList.remove("dragging");
});
});
containers.forEach((container) => {
container.addEventListener("dragover", (e) => {
// by default, dropping inside an element is disabled
e.preventDefault();
currentContainer = container;
currentAfterElement = getDragAfterElement(container, e.clientY);
const draggable = document.querySelector(".dragging");
if (
draggable !== null &&
(currentDraggableClone === null ||
currentDraggableClone.id !== draggable.id)
) {
currentDraggableClone = draggable.cloneNode(true);
}
});
});
// determine the mouse position when dragging elements and
// return whichever element our mouse position is directly after
function getDragAfterElement(container, y) {
// array
const draggableElements = [
...container.querySelectorAll(".draggable:not(.dragging)")
];
// reduce -> loop through the list of draggableElements and determine
// which single element is directly after the mouse based on the y position (retrieved from the event)
return draggableElements.reduce(
(closest, child) => {
const box = child.getBoundingClientRect();
const offset = y - box.top - box.height / 2;
if (offset < 0 && offset > closest.offset) {
return { offset: offset, element: child };
} else {
return closest;
}
},
{ offset: Number.NEGATIVE_INFINITY }
).element;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/367767.html
標籤：javascript html css