Drag & Drop API使用して要素を並び替える際に、
ドロップが子要素にもできてしまっていました。
その回避策として子要素にはドロップをできないようにしました。
change.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag & Drop Example</title>
<script src="main.js"></script>
<style>
#container {
display: flex;
flex-direction: column;
width: 300px;
margin: 0 auto;
}
.item {
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 10px;
margin: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="container">
<div class="item" draggable="true">
<div>Item</div>
<div>1</div>
</div>
<div class="item" draggable="true">
<div>Item</div>
<div>2</div>
</div>
<div class="item" draggable="true">
<div>Item</div>
<div>3</div>
</div>
</div>
</body>
</html>
main.js
window.addEventListener('DOMContentLoaded', function() {
const container = document.getElementById('container');
let draggingItem = null;
container.addEventListener('dragstart', (e) => {
draggingItem = e.target;
e.dataTransfer.setData('text/plain', e.target.innerText);
});
container.addEventListener('dragover', (e) => {
e.preventDefault();
});
container.addEventListener('dragenter', (e) => {
if (e.target !== container && e.target.classList.contains('item')) {
e.target.style.border = '2px dashed #ccc';
}
});
container.addEventListener('dragleave', (e) => {
if (e.target !== container && e.target.classList.contains('item')) {
e.target.style.border = '';
}
});
container.addEventListener('drop', (e) => {
e.preventDefault();
if (e.target !== container && e.target.classList.contains('item')) {
e.target.style.border = '';
draggingItem.innerText = e.target.innerText;
e.target.innerText = e.dataTransfer.getData('text/plain');
}
});
})