<!DOCTYPE html>
\n<html lang=”zh-TW”>
\n<head>
\n<meta charset=”UTF-8″>
\n<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
\n<title>\u5b57\u8a5e\u62d6\u62c9\u91cd\u7d44<\/title>
\n<style>
\nbody {
\nfont-family: Arial, sans-serif;
\ndisplay: flex;
\njustify-content: center;
\nalign-items: center;
\nheight: 100vh;
\nmargin: 0;
\n}
\n.container {
\ndisplay: flex;
\ngap: 10px;
\n}
\n.word {
\npadding: 10px;
\nbackground-color: #f0f0f0;
\nborder: 1px solid #ccc;
\nborder-radius: 5px;
\ncursor: move;
\nuser-select: none;
\n}
\n.word:active {
\nbackground-color: #d0d0d0;
\n}
\n<\/style>
\n<\/head>
\n<body>
\n<div class=”container” id=”word-container”>
\n<div class=”word” draggable=”true” id=”word1″ ondragstart=”drag(event)”>\u9019<\/div>
\n<div class=”word” draggable=”true” id=”word2″ ondragstart=”drag(event)”>\u662f<\/div>
\n<div class=”word” draggable=”true” id=”word3″ ondragstart=”drag(event)”>\u4e00\u500b<\/div>
\n<div class=”word” draggable=”true” id=”word4″ ondragstart=”drag(event)”>\u7bc4\u4f8b<\/div>
\n<\/div><\/p>\n
<script>
\n\/\/ \u7576\u958b\u59cb\u62d6\u52d5\u67d0\u500b\u5143\u7d20\u6642
\nfunction drag(event) {
\nevent.dataTransfer.setData(“text”, event.target.id); \/\/ \u5b58\u5132\u88ab\u62d6\u52d5\u5143\u7d20\u7684ID
\n}<\/p>\n
\/\/ \u7576\u62d6\u52d5\u5143\u7d20\u9032\u5165\u5176\u4ed6\u5340\u57df\u6642
\ndocument.getElementById(“word-container”).addEventListener(“dragover”, function(event) {
\nevent.preventDefault(); \/\/ \u8b93\u76ee\u6a19\u5340\u57df\u53ef\u4ee5\u63a5\u53d7\u62d6\u52d5
\n});<\/p>\n
\/\/ \u7576\u62d6\u52d5\u5143\u7d20\u88ab\u653e\u5230\u65b0\u7684\u4f4d\u7f6e\u6642
\ndocument.getElementById(“word-container”).addEventListener(“drop”, function(event) {
\nevent.preventDefault(); \/\/ \u9632\u6b62\u9810\u8a2d\u884c\u70ba
\nconst data = event.dataTransfer.getData(“text”); \/\/ \u7372\u53d6\u88ab\u62d6\u52d5\u5143\u7d20\u7684ID
\nconst draggedElement = document.getElementById(data); \/\/ \u627e\u5230\u88ab\u62d6\u52d5\u7684\u5143\u7d20
\nconst targetElement = event.target; \/\/ \u76ee\u6a19\u5143\u7d20<\/p>\n
\/\/ \u78ba\u4fdd\u76ee\u6a19\u5143\u7d20\u662f\u55ae\u4e00\u7684\u5b57\u8a5e\u65b9\u584a
\nif (targetElement.className === “word”) {
\n\/\/ \u5728\u76ee\u6a19\u5143\u7d20\u4e4b\u524d\u63d2\u5165\u88ab\u62d6\u52d5\u7684\u5143\u7d20
\nconst container = document.getElementById(“word-container”);
\nconst targetIndex = Array.from(container.children).indexOf(targetElement);
\nif (targetIndex > -1) {
\ncontainer.insertBefore(draggedElement, targetElement);
\n} else {
\ncontainer.appendChild(draggedElement); \/\/ \u5982\u679c\u653e\u5230\u6700\u5f8c\u5247\u8ffd\u52a0
\n}
\n}
\n});
\n<\/script>
\n<\/body>
\n<\/html><\/p>\n