Commit @37e03b7beb4564c8b2a12824f3e2b625b63842d6

홍아랑 2024-08-13

240813 홍아랑 잉크 문제 로직 추가

@37e03b7beb4564c8b2a12824f3e2b625b63842d6

c0b1014

37e03b7

client/views/pages/main/Chapter/Chapter2_9.vue

--- client/views/pages/main/Chapter/Chapter2_9.vue

+++ client/views/pages/main/Chapter/Chapter2_9.vue


 <template>
-    <div id="Chapter1_1" class="content-wrap">
-      <div style="margin: 30px 0px 50px">
-          <router-link to="/MyPlan.page">
-            <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
-          </router-link>
-      </div>
-      <div class="title-box mb25 flex align-center mt40">
-        <span class="title mr40">1. Hello WORLD</span>
-        <span class="subtitle">my name is dd</span>
-      </div>
-      <div class="flex justify-between align-center">
-        <div class="pre-btn" @click="goToPage('Chapter2_4')"><img src="../../../../resources/img/left.png" alt=""></div>
-        <div class="content title-box">
-          <p class="title mt25 title-bg">step2</p>
-          <div class="flex align-center mb30">
-          <p class="subtitle2 mr20">앗! 잉크가 쏟아졌어! 잉크를 지워줘!</p>
-          <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
-          </button> -->
+  <div id="Chapter1_1" class="content-wrap">
+    <div class="title-box mb25 flex align-center mt40">
+      <span class="title mr40">1. Hello WORLD</span>
+      <span class="subtitle">my name is dd</span>
+    </div>
+    <div class="flex justify-between align-center">
+      <div class="pre-btn" @click="goToPage('Chapter2_4')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="content title-box">
+        <p class="title mt25 title-bg">step2</p>
+        <div class="flex align-center mb30">
+          <p class="subtitle2 mr20">앗! 잉크가 쏟아졌어! 지우개로 잉크를 지워줘!</p>
         </div>
-  
-          <div class="text-ct">
+
+        <div class="text-ct">
           <div class="dropGroup flex align-center justify-center">
-            <div style="position: relative;" >
+            <div style="position: relative;">
               <img src="../../../../resources/img/img72_41s.png" alt="" style="width: 93%;">
               <div class="vocaGroup">
                 <div class="flex justify-between mb80">
-                    <article class="flex align-center">
-                        <div class="imgGroup mr30"><img src="../../../../resources/img/img74_41s.png" data-num="1"></div>
-                        <div class="flex align-start">
-                             <div>
-                                <h3>sidewalk</h3>
-                                   <div class="flex align-center mt10">
-                                      <span class="title1">보도</span>
-                                   </div>
-                           </div>
+                  <article class="flex align-center">
+                    <div class="imgGroup mr30">
+                      <img src="../../../../resources/img/img74_41s.png" data-num="1" class="ink" />
+                    </div>
+                    <div class="flex align-start">
+                      <div>
+                        <h3>sidewalk</h3>
+                        <div class="flex align-center mt10">
+                          <span class="title1">보도</span>
                         </div>
-                    </article>
-                    <article class="flex align-center">
-                        <div class="imgGroup mr30"><img src="../../../../resources/img/img75_41s.png" data-num="1"></div>
-                        <div class="flex align-start">
-                             <div>
-                                <h3>sidewalk</h3>
-                                   <div class="flex align-center mt10">
-                                      <span class="title1">보도</span>
-                                   </div>
-                           </div>
+                      </div>
+                    </div>
+                  </article>
+                  <article class="flex align-center">
+                    <div class="imgGroup mr30">
+                      <img src="../../../../resources/img/img75_41s.png" data-num="2" class="ink" />
+                    </div>
+                    <div class="flex align-start">
+                      <div>
+                        <h3>sidewalk</h3>
+                        <div class="flex align-center mt10">
+                          <span class="title1">보도</span>
                         </div>
-                    </article>
+                      </div>
+                    </div>
+                  </article>
                 </div>
                 <div class="flex justify-between">
-                    <article class="flex align-center">
-                        <div class="imgGroup mr30"><img src="../../../../resources/img/img76_41s.png" data-num="1"></div>
-                        <div class="flex align-start">
-                             <div>
-                                <h3>sidewalk</h3>
-                                   <div class="flex align-center mt10">
-                                      <span class="title1">보도</span>
-                                   </div>
-                           </div>
+                  <article class="flex align-center">
+                    <div class="imgGroup mr30">
+                      <img src="../../../../resources/img/img76_41s.png" data-num="3" class="ink" />
+                    </div>
+                    <div class="flex align-start">
+                      <div>
+                        <h3>sidewalk</h3>
+                        <div class="flex align-center mt10">
+                          <span class="title1">보도</span>
                         </div>
-                    </article>
-                    <article class="flex align-center">
-                        <div class="imgGroup mr30"><img src="../../../../resources/img/img77_41s.png" data-num="1"></div>
-                        <div class="flex align-start">
-                             <div>
-                                <h3>sidewalk</h3>
-                                   <div class="flex align-center mt10">
-                                      <span class="title1">보도</span>
-                                   </div>
-                           </div>
+                      </div>
+                    </div>
+                  </article>
+                  <article class="flex align-center">
+                    <div class="imgGroup mr30">
+                      <img src="../../../../resources/img/img77_41s.png" data-num="4" class="ink" />
+                    </div>
+                    <div class="flex align-start">
+                      <div>
+                        <h3>sidewalk</h3>
+                        <div class="flex align-center mt10">
+                          <span class="title1">보도</span>
                         </div>
-                    </article>
+                      </div>
+                    </div>
+                  </article>
                 </div>
               </div>
-             <div class="textbox">
-                <button style="left: 141px;
-      top: 44px;"><img src="../../../../resources/img/img78_41s.png" alt=""></button>
-                <button style="    left: 200px;
-      bottom: 46px;"><img src="../../../../resources/img/img79_41s.png" alt=""></button>
-                <button style="    right: 237px;
-      top: 114px;"><img src="../../../../resources/img/img80_41s.png" alt=""></button>
-                <button style="     right: 159px;
-      bottom: 5px;"><img src="../../../../resources/img/img81_41s.png" alt=""></button>
-             </div>
-               
+              <div class="textbox">
+                <button id="eraser1" class="dropzone" style="left: 141px; top: 44px;">
+                  <img src="../../../../resources/img/img78_41s.png" alt="" />
+                </button>
+                <button id="eraser2" class="dropzone" style="left: 200px; bottom: 46px;">
+                  <img src="../../../../resources/img/img79_41s.png" alt="" />
+                </button>
+                <button id="eraser3" class="dropzone" style="right: 237px; top: 114px;">
+                  <img src="../../../../resources/img/img80_41s.png" alt="" />
+                </button>
+                <button id="eraser4" class="dropzone" style="right: 159px; bottom: 5px;">
+                  <img src="../../../../resources/img/img81_41s.png" alt="" />
+                </button>
+              </div>
             </div>
           </div>
           <div class="dragGroup">
-            <div >
-                <article style=" left: 83px;
-    top: 69%; "><button><img src="../../../../resources/img/img73_41s.png" alt=""></button></article>
+            <div>
+              <article style="left: 83px; top: 69%;">
+                <button id="eraser" draggable="true" @dragstart="handleDragStart">
+                  <img src="../../../../resources/img/img73_41s.png" alt="" />
+                </button>
+              </article>
             </div>
-            
           </div>
         </div>
-        </div>
-        <div class="next-btn" @click="goToPage('Chapter2_8')"><img src="../../../../resources/img/right.png" alt=""></div>
       </div>
+      <div class="next-btn" @click="goToPage('Chapter2_8')"><img src="../../../../resources/img/right.png" alt=""></div>
     </div>
-  </template>
+  </div>
+</template>
+
   
-  <script>
-  export default {
-    data() {
-      return {
+<script>
+export default {
+  data() {
+    return {
+      draggedElementId: null, // 드래그한 요소의 ID를 저장
+    };
+  },
+  methods: {
+    goToPage(page) {
+      this.$router.push({ name: page });
+    },
+    handleDragStart(event) {
+      this.draggedElementId = event.target.id; // 드래그한 요소의 ID를 저장
+      event.dataTransfer.setData('text/plain', this.draggedElementId);
+    },
+    handleDragOver(event) {
+      event.preventDefault(); // 드롭을 허용
+    },
+    handleDrop(event) {
+      event.preventDefault();
+
+      // 드롭된 영역이 버튼인지 확인
+      const dropZone = event.target.closest('button.dropzone');
+
+      if (dropZone) {
+        // 드롭이 이루어진 영역이 버튼일 때만 처리
+        dropZone.querySelector('img').style.display = 'none'; // 잉크를 숨깁니다
       }
-    },
-    methods: {
-      goToPage(page) {
-        this.$router.push({ name: page });
+
+      // 드래그한 요소를 원래 위치로 복원
+      const draggedElement = document.getElementById(this.draggedElementId);
+      if (draggedElement) {
+        draggedElement.style.visibility = 'visible';
+        draggedElement.style.position = '';
+        draggedElement.style.top = '';
+        draggedElement.style.left = '';
       }
-    },
-    watch: {
-  
-    },
-    computed: {
-  
-    },
-    components: {
-    },
-    mounted() {
-      
+
+      this.draggedElementId = null; // 드래그 상태 초기화
     }
+  },
+  mounted() {
+    // 드래그 가능한 영역에 드래그 오버 및 드롭 이벤트를 추가합니다
+    document.querySelectorAll('.dropzone').forEach(button => {
+      button.addEventListener('dragover', this.handleDragOver);
+      button.addEventListener('drop', this.handleDrop);
+    });
   }
-  </script>
-  <style scoped>
-  .vocaGroup{    width: 79%;
-    position: absolute;
-    top: 90px;
-    left: 120px;}
+}
+</script>
+
+
+
+<style scoped>
+.vocaGroup {
+  width: 79%;
+  position: absolute;
+  top: 90px;
+  left: 120px;
+}
+
+.ink {
+  cursor: pointer;
+}
+
+
 </style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,132 +1,176 @@
1	1	<template>
2		- <div id="Chapter1_1" class="content-wrap">
3		- <div style="margin: 30px 0px 50px">
4		- <router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
6		- </router-link>
7		- </div>
8		- <div class="title-box mb25 flex align-center mt40">
9		- <span class="title mr40">1. Hello WORLD</span>
10		- <span class="subtitle">my name is dd</span>
11		- </div>
12		- <div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Chapter2_4')"><img src="../../../../resources/img/left.png" alt=""></div>
14		- <div class="content title-box">
15		- <p class="title mt25 title-bg">step2</p>
16		- <div class="flex align-center mb30">
17		- <p class="subtitle2 mr20">앗! 잉크가 쏟아졌어! 잉크를 지워줘!</p>
18		- <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
19		- </button> -->
	2	+ <div id="Chapter1_1" class="content-wrap">
	3	+ <div class="title-box mb25 flex align-center mt40">
	4	+ <span class="title mr40">1. Hello WORLD</span>
	5	+ <span class="subtitle">my name is dd</span>
	6	+ </div>
	7	+ <div class="flex justify-between align-center">
	8	+ <div class="pre-btn" @click="goToPage('Chapter2_4')"><img src="../../../../resources/img/left.png" alt=""></div>
	9	+ <div class="content title-box">
	10	+ <p class="title mt25 title-bg">step2</p>
	11	+ <div class="flex align-center mb30">
	12	+ <p class="subtitle2 mr20">앗! 잉크가 쏟아졌어! 지우개로 잉크를 지워줘!</p>
20	13	</div>
21		-
22		- <div class="text-ct">
	14	+
	15	+ <div class="text-ct">
23	16	<div class="dropGroup flex align-center justify-center">
24		- <div style="position: relative;" >
	17	+ <div style="position: relative;">
25	18	<img src="../../../../resources/img/img72_41s.png" alt="" style="width: 93%;">
26	19	<div class="vocaGroup">
27	20	<div class="flex justify-between mb80">
28		- <article class="flex align-center">
29		- <div class="imgGroup mr30"><img src="../../../../resources/img/img74_41s.png" data-num="1"></div>
30		- <div class="flex align-start">
31		- <div>
32		- <h3>sidewalk</h3>
33		- <div class="flex align-center mt10">
34		- <span class="title1">보도</span>
35		- </div>
36		- </div>
	21	+ <article class="flex align-center">
	22	+ <div class="imgGroup mr30">
	23	+ <img src="../../../../resources/img/img74_41s.png" data-num="1" class="ink" />
	24	+ </div>
	25	+ <div class="flex align-start">
	26	+ <div>
	27	+ <h3>sidewalk</h3>
	28	+ <div class="flex align-center mt10">
	29	+ <span class="title1">보도</span>
37	30	</div>
38		- </article>
39		- <article class="flex align-center">
40		- <div class="imgGroup mr30"><img src="../../../../resources/img/img75_41s.png" data-num="1"></div>
41		- <div class="flex align-start">
42		- <div>
43		- <h3>sidewalk</h3>
44		- <div class="flex align-center mt10">
45		- <span class="title1">보도</span>
46		- </div>
47		- </div>
	31	+ </div>
	32	+ </div>
	33	+ </article>
	34	+ <article class="flex align-center">
	35	+ <div class="imgGroup mr30">
	36	+ <img src="../../../../resources/img/img75_41s.png" data-num="2" class="ink" />
	37	+ </div>
	38	+ <div class="flex align-start">
	39	+ <div>
	40	+ <h3>sidewalk</h3>
	41	+ <div class="flex align-center mt10">
	42	+ <span class="title1">보도</span>
48	43	</div>
49		- </article>
	44	+ </div>
	45	+ </div>
	46	+ </article>
50	47	</div>
51	48	<div class="flex justify-between">
52		- <article class="flex align-center">
53		- <div class="imgGroup mr30"><img src="../../../../resources/img/img76_41s.png" data-num="1"></div>
54		- <div class="flex align-start">
55		- <div>
56		- <h3>sidewalk</h3>
57		- <div class="flex align-center mt10">
58		- <span class="title1">보도</span>
59		- </div>
60		- </div>
	49	+ <article class="flex align-center">
	50	+ <div class="imgGroup mr30">
	51	+ <img src="../../../../resources/img/img76_41s.png" data-num="3" class="ink" />
	52	+ </div>
	53	+ <div class="flex align-start">
	54	+ <div>
	55	+ <h3>sidewalk</h3>
	56	+ <div class="flex align-center mt10">
	57	+ <span class="title1">보도</span>
61	58	</div>
62		- </article>
63		- <article class="flex align-center">
64		- <div class="imgGroup mr30"><img src="../../../../resources/img/img77_41s.png" data-num="1"></div>
65		- <div class="flex align-start">
66		- <div>
67		- <h3>sidewalk</h3>
68		- <div class="flex align-center mt10">
69		- <span class="title1">보도</span>
70		- </div>
71		- </div>
	59	+ </div>
	60	+ </div>
	61	+ </article>
	62	+ <article class="flex align-center">
	63	+ <div class="imgGroup mr30">
	64	+ <img src="../../../../resources/img/img77_41s.png" data-num="4" class="ink" />
	65	+ </div>
	66	+ <div class="flex align-start">
	67	+ <div>
	68	+ <h3>sidewalk</h3>
	69	+ <div class="flex align-center mt10">
	70	+ <span class="title1">보도</span>
72	71	</div>
73		- </article>
	72	+ </div>
	73	+ </div>
	74	+ </article>
74	75	</div>
75	76	</div>
76		- <div class="textbox">
77		- <button style="left: 141px;
78		- top: 44px;"><img src="../../../../resources/img/img78_41s.png" alt=""></button>
79		- <button style=" left: 200px;
80		- bottom: 46px;"><img src="../../../../resources/img/img79_41s.png" alt=""></button>
81		- <button style=" right: 237px;
82		- top: 114px;"><img src="../../../../resources/img/img80_41s.png" alt=""></button>
83		- <button style=" right: 159px;
84		- bottom: 5px;"><img src="../../../../resources/img/img81_41s.png" alt=""></button>
85		- </div>
86		-
	77	+ <div class="textbox">
	78	+ <button id="eraser1" class="dropzone" style="left: 141px; top: 44px;">
	79	+ <img src="../../../../resources/img/img78_41s.png" alt="" />
	80	+ </button>
	81	+ <button id="eraser2" class="dropzone" style="left: 200px; bottom: 46px;">
	82	+ <img src="../../../../resources/img/img79_41s.png" alt="" />
	83	+ </button>
	84	+ <button id="eraser3" class="dropzone" style="right: 237px; top: 114px;">
	85	+ <img src="../../../../resources/img/img80_41s.png" alt="" />
	86	+ </button>
	87	+ <button id="eraser4" class="dropzone" style="right: 159px; bottom: 5px;">
	88	+ <img src="../../../../resources/img/img81_41s.png" alt="" />
	89	+ </button>
	90	+ </div>
87	91	</div>
88	92	</div>
89	93	<div class="dragGroup">
90		- <div >
91		- <article style=" left: 83px;
92		- top: 69%; "><button><img src="../../../../resources/img/img73_41s.png" alt=""></button></article>
	94	+ <div>
	95	+ <article style="left: 83px; top: 69%;">
	96	+ <button id="eraser" draggable="true" @dragstart="handleDragStart">
	97	+ <img src="../../../../resources/img/img73_41s.png" alt="" />
	98	+ </button>
	99	+ </article>
93	100	</div>
94		-
95	101	</div>
96	102	</div>
97		- </div>
98		- <div class="next-btn" @click="goToPage('Chapter2_8')"><img src="../../../../resources/img/right.png" alt=""></div>
99	103	</div>
	104	+ <div class="next-btn" @click="goToPage('Chapter2_8')"><img src="../../../../resources/img/right.png" alt=""></div>
100	105	</div>
101		- </template>
	106	+ </div>
	107	+</template>
	108	+
102	109
103		- <script>
104		- export default {
105		- data() {
106		- return {
	110	+<script>
	111	+export default {
	112	+ data() {
	113	+ return {
	114	+ draggedElementId: null, // 드래그한 요소의 ID를 저장
	115	+ };
	116	+ },
	117	+ methods: {
	118	+ goToPage(page) {
	119	+ this.$router.push({ name: page });
	120	+ },
	121	+ handleDragStart(event) {
	122	+ this.draggedElementId = event.target.id; // 드래그한 요소의 ID를 저장
	123	+ event.dataTransfer.setData('text/plain', this.draggedElementId);
	124	+ },
	125	+ handleDragOver(event) {
	126	+ event.preventDefault(); // 드롭을 허용
	127	+ },
	128	+ handleDrop(event) {
	129	+ event.preventDefault();
	130	+
	131	+ // 드롭된 영역이 버튼인지 확인
	132	+ const dropZone = event.target.closest('button.dropzone');
	133	+
	134	+ if (dropZone) {
	135	+ // 드롭이 이루어진 영역이 버튼일 때만 처리
	136	+ dropZone.querySelector('img').style.display = 'none'; // 잉크를 숨깁니다
107	137	}
108		- },
109		- methods: {
110		- goToPage(page) {
111		- this.$router.push({ name: page });
	138	+
	139	+ // 드래그한 요소를 원래 위치로 복원
	140	+ const draggedElement = document.getElementById(this.draggedElementId);
	141	+ if (draggedElement) {
	142	+ draggedElement.style.visibility = 'visible';
	143	+ draggedElement.style.position = '';
	144	+ draggedElement.style.top = '';
	145	+ draggedElement.style.left = '';
112	146	}
113		- },
114		- watch: {
115		-
116		- },
117		- computed: {
118		-
119		- },
120		- components: {
121		- },
122		- mounted() {
123		-
	147	+
	148	+ this.draggedElementId = null; // 드래그 상태 초기화
124	149	}
	150	+ },
	151	+ mounted() {
	152	+ // 드래그 가능한 영역에 드래그 오버 및 드롭 이벤트를 추가합니다
	153	+ document.querySelectorAll('.dropzone').forEach(button => {
	154	+ button.addEventListener('dragover', this.handleDragOver);
	155	+ button.addEventListener('drop', this.handleDrop);
	156	+ });
125	157	}
126		- </script>
127		- <style scoped>
128		- .vocaGroup{ width: 79%;
129		- position: absolute;
130		- top: 90px;
131		- left: 120px;}
	158	+}
	159	+</script>
	160	+
	161	+
	162	+
	163	+<style scoped>
	164	+.vocaGroup {
	165	+ width: 79%;
	166	+ position: absolute;
	167	+ top: 90px;
	168	+ left: 120px;
	169	+}
	170	+
	171	+.ink {
	172	+ cursor: pointer;
	173	+}
	174	+
	175	+
132	176	</style> (No newline at end of file)

Delete comment