File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<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 {
draggedElement: null, // 현재 드래그 중인 요소
};
},
methods: {
complete() {
this.$router.push({ name: 'Dashboard', query: { value: 11 } });
},
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; // 드래그 상태 초기화
}
},
mounted() {
// 드래그 가능한 요소에 드래그 시작 및 종료 이벤트 추가
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>