자바스크립트 기능대회 예제 중 드래그 앤 드롭

6 글 보임 - 1 에서 6 까지 (총 6 중에서)

글쓴이

글
2022년 5월 3일 07:39 #33110

김건엽
참가자

아래 코드, //상품 드래그 및 장바구니 추가 기능에서 let productId = e.originalEvent.dataTransfer.getData('id')를 통해 만든 productId를 console.log(productId)로 띄워보면 "undefined"가 나오면서 상품이 추가되지 않습니다... 구글링 수시간을 해도 모르겠어서 여쭤봅니다..

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML !DOCTYPE declaration</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="homework.css" rel="stylesheet">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">집꾸미기</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li>
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
</li>
<li>
<button class="btn btn-outline-success" type="submit">Search</button>
</li>
</ul>

</div>
</div>
</nav>
<div id="productDisplay"class="row row-cols-1 row-cols-md-4 g-4">
</div>
<div id="cart">
<h5>장바구니</h4>
<div id="cart2" class="row row-cols-1 row-cols-md-3 g-4"></div>
</div>

<script>
//==========================
//상품 진열 기능
//==========================
let products = []
let cartBox = []
$.ajax({ //$.get('store.json').then((data)=>{}로 대체 가능
url: "store.json",
dataType:"json",
success: function(data){
// console.log(data.products[0]);
products = data.products;
products.forEach((a, i)=>{
$('#productDisplay').append(

<div class="col">
<div id="draggable-1" class="card h-100" draggable="true" data-id="${a.id}"><img class="card-img-top" src="${a.photo}" alt="..." />
<div class="card-body">

${a.id}
<h5 class="card-title">${a.title}</h5>
<p class="card-text">브랜드명:${a.brand}</p>
<p class="price">가격: ${a.price}</p>
<button class="btn btn-dark" type="button" data-id="${a.id}">담기</button>

</div>
</div>
</div>

)
})

//==========================
//상품 담기 기능
//==========================

$('.btn').click((e)=>{
let productId = e.target.dataset.id;
console.log(productId);
let 있니없니 = cartBox.findIndex((a)=>{return a.id==productId})
console.log(있니없니)
if(있니없니== -1){
let 현재상품 = products.find((a)=>{return a.id==productId});
console.log(현재상품);
현재상품.count = 1;
cartBox.push(현재상품)
// let nowP = 현재상품 ||{};
// console.log(nowP)
// nowP.count=1;
// cartBox.push(nowP)
}else{
cartBox[있니없니].count++;

}
document.querySelector('#cart2').innerHTML="";
cartBox.forEach((a, i)=>{
$('#cart2').append(

<div class="cartD">
<div id="draggable-1" class="card h-100" draggable="true" data-id="${a.id}"><img class="card-img-top" src="${a.photo}" alt="..." />
<div class="card-body">

${a.id}
<h5 class="card-title">${a.title}</h5>
<p class="amount">수량: ${a.count}</p>
<p class="price">가격: ${a.price}</p>

</div>
</div>
</div>

)
})

})
//==========================
//상품 드래그 및 장바구니 추가 기능
//==========================
$('.col').on('dragstart', function(e){
e.originalEvent.dataTransfer.setData('id', e.target.dataset.id)
});

$('#cart2').on('dragover', function(e){
e.preventDefault();
});

$('#cart2').on('drop', function(e){

let productId = e.originalEvent.dataTransfer.getData('id');
console.log(productId);

$('.btn').eq(productId).click();

});

2022년 5월 3일 09:26 #33112

codingapple
키 마스터

$('.col') 말고 .card 이런데다가 이벤트리스너 달아봅시다

2022년 5월 3일 20:47 #33152

김건엽
참가자

$('.col') 대신 $('.card-body')를 썼습니다. 그러니까 위에 여쭤봤던 console.log(productId)는 공백으로 나오고 그다음 아래 그림의 오류가 납니다... 도와주시면 넘나 감사하겠습니다.. ㅠㅠ

그림의 오류 내역을 복붙하면 다음과 같습니다.

homework.html:128
homework.html:78 undefined
homework.html:80 -1
homework.html:83 undefined
homework.html:84 Uncaught TypeError: Cannot set properties of undefined (setting 'count')
at HTMLButtonElement.<anonymous> (homework.html:84:32)
at HTMLButtonElement.dispatch (jquery-3.6.0.min.js:2:43064)
at HTMLButtonElement.v.handle (jquery-3.6.0.min.js:2:41048)
at Object.trigger (jquery-3.6.0.min.js:2:71515)
at HTMLButtonElement.<anonymous> (jquery-3.6.0.min.js:2:72110)
at Function.each (jquery-3.6.0.min.js:2:3003)
at S.fn.init.each (jquery-3.6.0.min.js:2:1481)
at S.fn.init.trigger (jquery-3.6.0.min.js:2:72086)
at S.fn.init.S.fn.<computed> [as click] (jquery-3.6.0.min.js:2:88570)
at HTMLDivElement.<anonymous> (homework.html:131:41)

위에 복붙했던 코드에서

125~128번쨰 줄:
$('#cart2').on('drop', function(e){

let productId = e.originalEvent.dataTransfer.getData('id');
console.log(productId);

76~ 85번째 줄:

$('.btn').click((e)=>{
let productId = e.target.dataset.id;
console.log(productId);
let 있니없니 = cartBox.findIndex((a)=>{return a.id==productId})
console.log(있니없니)
if(있니없니== -1){
let 현재상품 = products.find((a)=>{return a.id==productId});
console.log(현재상품);
현재상품.count = 1;
cartBox.push(현재상품)

2022년 5월 4일 00:07 #33170

codingapple
키 마스터

.card-body 요소에는 data-id 이런 속성이 없는 것 같아서 그런듯요

.card 에만 있군요

2022년 5월 4일 09:53 #33190

김건엽
참가자

감사합니다, 이제 드래그로 데이터가 붙어는 오는데, 0번째를 드래그하면 Undefined와 함께 오류가, 1번째 상품을 드래그하면 0번째 상품이, 2번째 상품을 드래그하면 1번째 상품이 붙어옵니다.... 한 번만 더 도와주시면 감사하겠습니다. ㅠㅠ

0번째 상품 드래그했을때 사진

1번째 상품 드래그했을 때 0번째 상품이 장바구니에 담깁니다.

//==========================
//상품 담기 기능 75~106번째 줄
//==========================

$('.btn').click((e)=>{
let productId = e.target.dataset.id;
console.log(productId);
let 있니없니 = cartBox.findIndex((a)=>{return a.id==productId})
console.log(있니없니)
if(있니없니== -1){
let 현재상품 = products.find((a)=>{return a.id==productId});
console.log(현재상품);
현재상품.count = 1;
cartBox.push(현재상품)
// let nowP = 현재상품 ||{};
// console.log(nowP)
// nowP.count=1;
// cartBox.push(nowP)
}else{
cartBox[있니없니].count++;

}
document.querySelector('#cart2').innerHTML="";
cartBox.forEach((a, i)=>{
$('#cart2').append(

<div class="col">
<div id="draggable-1" class="card h-100" draggable="true" data-id="${a.id}">
<div class="card-body" data-id="${a.id}">
<img src="${a.photo}" class="card-img-top" alt="...">
<h5 class="card-title">${a.title}</h5>
<p class="amount">수량: ${a.count}</p>
<p class="price">가격: ${a.price}</p>
</div>
</div>
</div>
)
})

//==========================
//상품 드래그 및 장바구니 추가 기능 116번째 줄~132
//==========================
$('.card-body').on('dragstart', function(e){
e.originalEvent.dataTransfer.setData('id', e.target.dataset.id)
});

$('#cart2').on('dragover', function(e){
e.preventDefault();
});

$('#cart2').on('drop', function(e){

let productId = e.originalEvent.dataTransfer.getData('id');
console.log(productId);

$('.btn').eq(productId).click();

});

2022년 5월 4일 14:09 #33204

codingapple
키 마스터

개발자도구켜서 html에 data-id가 의도대로 잘 부착되어있는지 확인해봅시다

let 현재상품 = products.find((a)=>{return a.id==productId}); 이것도 products 변수에 상품들 잘 있는지랑 find도 의도대로 잘 동작하는지 확인해야할듯요
글쓴이

글

6 글 보임 - 1 에서 6 까지 (총 6 중에서)

답변은 로그인 후 가능합니다.

로그인

자바스크립트 기능대회 예제 중 드래그 앤 드롭

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png