1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>Document</title>
8 </head>
9 <style>
10 html {
11 height: 100%;
12 }
13 body {
14 height: 100%;
15 margin: 0;
16 }
17 .container {
18 width: 100%;
19 height: 100%;
20 background-color: #333;
21 color: white;
22 display: grid;
23 grid-template-columns: repeat(10, 10%);
24 grid-template-rows: repeat(10, 10%);
25 grid-auto-flow: row dense;
26 }
27
28 .item {
29 border-radius: 20px;
30 border: 4px solid #aaa;
31 margin: 2px;
32 display: flex;
33 justify-content: center;
34 align-items: center;
35 }
36
37 .item:hover {
38 cursor: pointer;
39 }
40
41 .move {
42 border: 4px dashed red;
43 }
44 </style>
45 <body></body>
46 </html>
47 <script>
48 class Game {
49 constructor(option) {
50 this.init();
51 this.createRect(
52 option && option.length ? option : new Array(20).fill({}),
53 );
54 }
55 init() {
56 const container = document.createElement("div");
57
58 container.className = "container";
59
60 container.addEventListener("dragstart", (e) => {
61 e.target.classList.add("move");
62 e.dataTransfer.setData("id", e.target.id);
63 });
64
65 container.addEventListener("drag", (e) => {});
66
67 container.addEventListener("dragend", (e) => {
68 e.target.classList.remove("move");
69 });
70
71 container.addEventListener("dragenter", (e) => {});
72
73 container.addEventListener("dragover", (e) => {
74 e.preventDefault();
75 });
76
77 container.addEventListener("dragleave", (e) => {});
78
79 container.addEventListener("drop", (e) => {
80 e.preventDefault();
81 if (!(e.target === container)) {
82 const curDom = document.getElementById(
83 e.dataTransfer.getData("id"),
84 );
85 container.insertBefore(curDom, e.target);
86 }
87 });
88
89 this.container = container;
90 }
91 getArea(times = 2) {
92 const random = Math.random,
93 ceil = Math.ceil;
94 return `auto / auto / span ${ceil(random() * times)} / span ${ceil(
95 random() * times,
96 )}`;
97 }
98 createRect(option) {
99 const container = this.container;
100 option.forEach((item, index) => {
101 const rect = document.createElement("div");
102 rect.draggable = true;
103 rect.id = `rect-${index}`;
104 rect.className = "item";
105 const gridArea = this.getArea();
106 rect.style.gridArea = gridArea;
107 rect.style.backgroundColor = item.color || "gold";
108 rect.innerText = item.text || index;
109 container.appendChild(rect);
110 });
111 }
112 mount(app) {
113 app.appendChild(this.container);
114 }
115 }
116
117 const option = [
118 { text: "向钱看，向厚看", color: "#dd6b66" },
119 { text: "早睡早起", color: "#759aa0" },
120 { text: "天冷要加衣", color: "#e69d87" },
121 { text: "博观而约取", color: "#8dc1a9" },
122 { text: "厚积而薄发", color: "#ea7e53" },
123 { text: "海纳百川", color: "#eedd78" },
124 { text: "有容乃大", color: "#73a373" },
125 { text: "大风起兮云飞扬", color: "#73b9bc" },
126 { text: "今日事，今日毕", color: "#7289ab" },
127 { text: "勤能补拙是良训", color: "#91ca8c" },
128 { text: "一分辛苦一分才", color: "#f49f42" },
129 { text: "宝剑锋从磨砺出", color: "#ff715e" },
130 { text: "梅花香自苦寒来", color: "#ffaf51" },
131 { text: "纸上得来终觉浅", color: "#ffee51" },
132 { text: "绝知此事要躬行", color: "#8c6ac4" },
133 { text: "", color: "#715c87" },
134 { text: "", color: "#c12e34" },
135 { text: "", color: "#e6b600" },
136 { text: "", color: "#0098d9" },
137 { text: "", color: "#2b821d" },
138 { text: "", color: "#005eaa" },
139 { text: "", color: "#339ca8" },
140 { text: "", color: "#cda819" },
141 { text: "", color: "#32a487" },
142 ];
143
144 new Game(option).mount(document.body);
145 </script>
