<template> <div id="Chapter1_1" class="content-wrap"> <div style="margin: 30px 0px 50px; width: 20%"> <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" style="justify-content: space-between" > <div> <span class="title mr40">1. Hello WORLD</span> <span class="subtitle">my name is dd</span> </div> <button class="completeBtn" @click="complete">학습 종료</button> </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"> <div style="display: flex; justify-content: space-between"> <p class="title mt25 title-bg">step3 - 놀면서 배우는 영어</p> <button id="returnButton" @click="returnPage" style="margin: 4rem"> <img src="../../../../resources/img/btn_return_50x50.png" alt="" /> <p>되돌리기</p> </button> </div> <div class="flex align-center mb30"> <p class="subtitle2 mr20"> 앗! 퍼즐이 망가졌어! 퍼즐을 맞춰 문장을 완성해보자! </p> </div> <div class="text-ct"> <div class="dropGroup flex align-center justify-center mt30"> <div style="position: relative"> <img src="../../../../resources/img/img28_s.png" alt="" /> <button class="dropzone" data-answer="umbrella" style="left: 30px; top: 167px" > <img src="../../../../resources/img/img29_s_01.png" alt="" /> <p style="font-size: 35px">우산</p> </button> <button class="dropzone" data-answer="line" style="right: 409px; top: 133px" > <img src="../../../../resources/img/img30_s_01.png" alt="" /> <p style="font-size: 35px">선</p> </button> <button class="dropzone" data-answer="lion" style="right: 46px; top: 128px" > <img src="../../../../resources/img/img31_s_01.png" alt="" /> <p style="font-size: 35px">사자</p> </button> </div> </div> <div class="dragGroup flex justify-center" style="gap: 20px"> <article style="right: 0; top: 36%"> <button class="draggable" data-text="umbrella" draggable="true"> <img src="../../../../resources/img/img29_s.png" alt="" /> <p style="font-size: 35px">umbrella</p> </button> </article> <article style="left: 0; top: 36%"> <button class="draggable" data-text="line" draggable="true"> <img src="../../../../resources/img/img30_s.png" alt="" /> <p style="font-size: 35px">line</p> </button> </article> <article style="left: 50%; top: 10%"> <button class="draggable" data-text="lion" draggable="true"> <img src="../../../../resources/img/img31_s.png" alt="" /> <p style="font-size: 35px">lion</p> </button> </article> </div> </div> </div> <div class="next-btn" @click="goToPage('Chapter2_7')"> <img src="../../../../resources/img/right.png" alt="" /> </div> </div> </div> </template> <script> export default { data() { return { name: "Params", draggedElement: null, // 현재 드래그 중인 요소 prblm_id: [], problemData: [], }; }, methods: { complete() { const { unit_id, book_id } = this.$route.query; this.$router.push({ name: "Dashboard", query: { value: 11, unit_id, book_id }, }); }, goToPage(page) { this.$router.push({ name: page }); }, returnPage() { window.location.reload(); }, handleDragStart(event) { this.draggedElement = event.target; // 드래그한 요소 저장 event.dataTransfer.setData("text/plain", event.target.dataset.text); event.target.style.cursor = "grabbing"; // 드래그 중 커서 변경 }, handleDragEnd(event) { event.target.style.cursor = "grab"; // 드래그 종료 후 커서 변경 }, handleDragOver(event) { event.preventDefault(); // 드롭 허용 }, handleDrop(event) { event.preventDefault(); const dropZone = event.target.closest("button.dropzone"); const draggedText = this.draggedElement ? this.draggedElement.dataset.text : ""; if (dropZone) { const expectedText = dropZone.dataset.answer; if (draggedText === expectedText) { // 드래그된 텍스트가 정답인 경우 const rect = dropZone.getBoundingClientRect(); // 버튼의 이미지 및 텍스트를 드롭존에 맞게 설정 dropZone.querySelector("p").textContent = draggedText; dropZone.querySelector("img").style.display = "none"; // 기존 이미지 숨기기 // 드래그된 버튼의 이미지와 텍스트를 드롭존에 복사 const draggedImage = this.draggedElement .querySelector("img") .cloneNode(); const draggedTextElement = this.draggedElement .querySelector("p") .cloneNode(); // 드롭존에 이미지 및 텍스트를 추가 dropZone.appendChild(draggedImage); dropZone.appendChild(draggedTextElement); // 드래그한 요소 숨기기 this.draggedElement.style.display = "none"; } else { // 정답이 아닌 경우 alert("오답입니다!"); // 오답 경고 메시지 } } this.draggedElement = null; // 드래그 상태 초기화 }, storeProblemId() { this.prblm_id = this.$store.getters.getLearningId; console.log("prblm_id", this.prblm_id); }, // fetchProblemData(prblm_id) { // axios({ // url: "/problemInfo.json", // method: "post", // headers: { // "Content-Type": "application/json; charset=UTF-8", // }, // data: { // prblm_id: this.prblm_id, // }, // }) // .then((response) => { // this.problemData = response.data; // }) // .catch((error) => { // this.state = "noProblem"; // console.error("Error fetching roadmap data:", error); // }); // }, }, mounted() { this.storeProblemId(); // 드래그 가능한 요소에 드래그 시작 및 종료 이벤트 추가 document.querySelectorAll(".draggable").forEach((button) => { button.addEventListener("dragstart", this.handleDragStart); button.addEventListener("dragend", this.handleDragEnd); }); // 드롭 가능한 영역에 드래그 오버 및 드롭 이벤트 추가 document.querySelectorAll(".dropzone").forEach((zone) => { zone.addEventListener("dragover", this.handleDragOver); zone.addEventListener("drop", this.handleDrop); }); }, }; </script> <style scoped> .draggable { cursor: grab; } .draggable:active { cursor: grabbing; } .dropzone img { display: block; /* 이미지가 항상 보이도록 설정 */ } .completeBtn { margin-right: 100px; background-color: #ffba08; padding: 10px 30px; border-radius: 10px; font-size: 28px; font-family: "ONEMobilePOPOTF"; } </style>