웹개발 기능대회

[김지원]

안녕하세요 선생님 ! 웹개발 기능대회 문제 풀던 중 막히는 부분이 있어서 질문 남깁니다.

const row = document.querySelector('.row')
let products = []

// 초기화면
fetch('store1.json')
    .then(res => res.json()) // 받아온 JSON -> object로 변환
    .then(data => {
        products = data.products;
        data.products.forEach(function(a,i){
        let templete = `<div class="col-md-3">
                <div class="item" draggable="true" data-id="${a.id}">
                        < img src="${a.photo}">
                        <h4 class="title">${a.title}</h4>
                        <p>가격 : ${a.price}</p>
                        <div class="btn btn-dark">담기</div>
                    </div>
                </div>`
         row.insertAdjacentHTML('beforeend', templete)
    })
    })
    .catch(error => {
        console.log(error)
    })

이렇게 데이터를 받아오고 드래그&드랍 이벤트 구현하려고 itme을 찾으려고 했는데
const item = document.querySelectorAll('.item')
console.log(item)
콘솔창에 각각의 item들이 안나오고 NodeList[]라고 뜹니다.
어떻게 해야 동적으로 생성한 html요소들을 출력할수있는건가요 ? ㅠㅠ

[김지원]

해결했습니다 ! 그런데 한가지 문제가 더있어요 ..

const item = document.querySelectorAll('.item')
         const basket = document.querySelector('.basket')

         for(i=0; i<4; i++){
            item[i].addEventListener('dragstart',function(e){
                e.dataTransfer.setData('id', e.target.dataset.id)
            })
         }

         basket.addEventListener('dragover', function(e) {
            e.preventDefault();
            e.stopPropagation();
         })

         basket.addEventListener('drop',function(e) {
            e.preventDefault();
            e.stopPropagation();

            let productId = e.dataTransfer.getData('id');
            basket.appendChild(item[productId])
         })


이렇게 코드를 짜서 드래그 드랍은 되는데 
상품이 원래있던 위치에서 아예 옮겨진다해야되나 ?? 톡 떼져서 장바구니 영역으로 이동하고 그 영역은 비워진채로 남아있습니다  ㅠㅠ
도와주세요 .... ㅠㅠㅠㅠㅠㅠㅠ

[codingapple]

https://stackoverflow.com/questions/19783077/javascript-keep-the-original-image-after-dropping-it-in-another-container
.cloneNode 라는거 써봅시다

[글쓴이]

글