<!DOCTYPE html>
<html lang=”zh-TW”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>字詞拖拉重組</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
display: flex;
gap: 10px;
}
.word {
padding: 10px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 5px;
cursor: move;
user-select: none;
}
.word:active {
background-color: #d0d0d0;
}
</style>
</head>
<body>
<div class=”container” id=”word-container”>
<div class=”word” draggable=”true” id=”word1″ ondragstart=”drag(event)”>這</div>
<div class=”word” draggable=”true” id=”word2″ ondragstart=”drag(event)”>是</div>
<div class=”word” draggable=”true” id=”word3″ ondragstart=”drag(event)”>一個</div>
<div class=”word” draggable=”true” id=”word4″ ondragstart=”drag(event)”>範例</div>
</div>
<script>
// 當開始拖動某個元素時
function drag(event) {
event.dataTransfer.setData(“text”, event.target.id); // 存儲被拖動元素的ID
}
// 當拖動元素進入其他區域時
document.getElementById(“word-container”).addEventListener(“dragover”, function(event) {
event.preventDefault(); // 讓目標區域可以接受拖動
});
// 當拖動元素被放到新的位置時
document.getElementById(“word-container”).addEventListener(“drop”, function(event) {
event.preventDefault(); // 防止預設行為
const data = event.dataTransfer.getData(“text”); // 獲取被拖動元素的ID
const draggedElement = document.getElementById(data); // 找到被拖動的元素
const targetElement = event.target; // 目標元素
// 確保目標元素是單一的字詞方塊
if (targetElement.className === “word”) {
// 在目標元素之前插入被拖動的元素
const container = document.getElementById(“word-container”);
const targetIndex = Array.from(container.children).indexOf(targetElement);
if (targetIndex > -1) {
container.insertBefore(draggedElement, targetElement);
} else {
container.appendChild(draggedElement); // 如果放到最後則追加
}
}
});
</script>
</body>
</html>