标签：container 拖动 text color html grid auto bubble
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 <script>
10 /*
11 * 项目与容器
12 *
13 * 1. 容器是一个 BFC，容器的内部不会影响到容器的外部
14 * 2. 容器可以划分网格，为项目提供默认值，但是并不关心项目的实际位置
15 * 3. 不允许 float，但是可以 position
16 */
17
18 /*
19 * 容器属性：
20 *
21 * 1. 定义一个容器
22 * display: grid; inline-grid;
23 * 2. 定义网格线
24 * grid-template-colums: ;
25 * grid-template-rows: ; 可以给网格线添加名字 [c1, other-name] 100px [c2] 100px [c3] auto [c4]，
26 * 3. 定义间隔
27 * column-gap: ;
28 * row-gap: ;
29 * gap: row-gap column-gap ;
30 * 4. 定义区域，项目会用到区域名
31 * grid-template-areas:
32 * "header header header"
33 * "main main silder"
34 * "footer footer footer";
35 * 5. 定义文档流，dense 可以使项目紧凑
36 * grid-auto-flow: row; column; row dense; column dense;
37 * 6. 定义项目在轴线上的默认排版方式
38 * justify-items: ;
39 * align-items: ;
40 * place-items: 简写
41 * 7. 定义轴线在容器的排版方式
42 * justify-content: ;
43 * align-content: ;
44 * place-content: 简写
45 * 8. 如果项目溢出容器，可以用这个定义
46 * grid-auto-rows: ;
47 * 9. grid-tempate：简写
48 * 10. grid：简写
49 */
50
51 /* 项目属性：
52 *
53 * 1. 定义占用的网格，通过边界来定义；以下表示占用了左上角的四个网格
54 * grid-column-start: 1;
55 * grid-column-end: 3;
56 * grid-row-start: 1;
57 * grid-row-end: 3;
58 * 2. 简写
59 * grid-column: 1 / 3 ;
60 * grid-row: 1 / 3;
61 * 3. 简写
62 * grid-area: 1 / 1 / 3 / 3;
63 * 4. 其余值示例一：表示从默认位置开始，横跨两列，纵跨两列，即占用四个网格
64 * grid-area: auto / auto / span 2 / span 2;
65 * 5. 其余值示例二：表示占用名为 header 的全部网格
66 * grid-area: header
67 * 6. 定义单个项目的排版，和 flex 相同
68 * justify-self: ;
69 * align-self: ;
70 * place-self: ;
71 */
72
73 /* 单位
74 *
75 * 1. 以上和 flex 值相同的部分省略掉了；以下是单位说明
76 * 2. 纵横百分比：以容器的纵横为单位
77 * 3. fr：这个是剩余空间的百分比，存在一些智能行为
78 * 4. px：
79 * 5. repeat(times, mode)：mode 可以是多个值，比如 repeat(3, 1fr 2fr)
80 * 6. auto-fill：项目大小确定，但是容器大小不确定的时候用，示例 repeat(auto-fill, 100px)，表示尽量填充
81 * 7. minmax(min, max)
82 * */
83 </script>
84 <style>
85 html {
86 height: 100%;
87 }
88 body {
89 height: 100%;
90 margin: 0;
91 }
92 .container {
93 width: 100%;
94 height: 100%;
95 background-color: #333;
96 color: white;
97 display: grid;
98 grid-template-columns: repeat(10, 10%);
99 grid-template-rows: repeat(10, 10%);
100 grid-auto-flow: row dense;
101 }
102
103 .item {
104 border-radius: 20px;
105 border: 4px solid #aaa;
106 margin: 2px;
107 display: flex;
108 justify-content: center;
109 align-items: center;
110 }
111
112 .move {
113 border: 4px dashed red;
114 }
115 </style>
116 <body></body>
117 </html>
118 <script>
119 class Game {
120 constructor(option) {
121 this.init();
122 this.createBubble(option || new Array(20).fill({}));
123 }
124 init() {
125 const container = document.createElement("div");
126
127 container.className = "container";
128
129 container.addEventListener("dragstart", (e) => {
130 e.target.classList.add("move");
131 e.dataTransfer.setData("id", e.target.id);
132 });
133
134 container.addEventListener("drag", (e) => {});
135
136 container.addEventListener("dragend", (e) => {
137 e.target.classList.remove("move");
138 });
139
140 container.addEventListener("dragenter", (e) => {});
141
142 container.addEventListener("dragover", (e) => {
143 e.preventDefault();
144 });
145
146 container.addEventListener("dragleave", (e) => {});
147
148 container.addEventListener("drop", (e) => {
149 e.preventDefault();
150 const curDom = document.getElementById(
151 e.dataTransfer.getData("id"),
152 );
153 container.insertBefore(curDom, e.target);
154 });
155
156 this.container = container;
157 }
158 getArea() {
159 const times = 2,
160 random = Math.random,
161 ceil = Math.ceil;
162 return `auto / auto / span ${ceil(random() * times)} / span ${ceil(
163 random() * times,
164 )}`;
165 }
166 createBubble(option) {
167 const container = this.container;
168 option.forEach((item, index) => {
169 const bubble = document.createElement("div");
170 bubble.draggable = true;
171 bubble.id = `bubble-${index}`;
172 bubble.className = "item";
173 const gridArea = this.getArea();
174 bubble.style.gridArea = gridArea;
175 bubble.style.backgroundColor = item.color;
176 bubble.innerText = item.text || index;
177 container.appendChild(bubble);
178 });
179 }
180 mount(app) {
181 app.appendChild(this.container);
182 }
183 }
184
185 const option = [
186 { text: "向钱看，向厚看", color: "#dd6b66" },
187 { text: "早睡早起", color: "#759aa0" },
188 { text: "天冷要加衣", color: "#e69d87" },
189 { text: "博观而约取", color: "#8dc1a9" },
190 { text: "厚积而薄发", color: "#ea7e53" },
191 { text: "海纳百川", color: "#eedd78" },
192 { text: "有容乃大", color: "#73a373" },
193 { text: "大风起兮云飞扬", color: "#73b9bc" },
194 { text: "今日事，今日毕", color: "#7289ab" },
195 { text: "勤能补拙是良训", color: "#91ca8c" },
196 { text: "一分辛苦一分才", color: "#f49f42" },
197 { text: "宝剑锋从磨砺出", color: "#ff715e" },
198 { text: "梅花香自苦寒来", color: "#ffaf51" },
199 { text: "纸上得来终觉浅", color: "#ffee51" },
200 { text: "绝知此事要躬行", color: "#8c6ac4" },
201 { text: "", color: "#715c87" },
202 { text: "", color: "#c12e34" },
203 { text: "", color: "#e6b600" },
204 { text: "", color: "#0098d9" },
205 { text: "", color: "#2b821d" },
206 { text: "", color: "#005eaa" },
207 { text: "", color: "#339ca8" },
208 { text: "", color: "#cda819" },
209 { text: "", color: "#32a487" },
210 ];
211
212 new Game(option).mount(document.body);
213 </script>
标签：container,
拖动,
text,
color,
html,
grid,
auto,
bubble
From： https://www.cnblogs.com/aurora-power/p/16901869.html