[object HTMLDivElement]

[정중식]

장바구니 드래그 구현중 막혀서 질문드립니다.
우선 저는 제이쿼리보단 쌩js를 고집하고있어서 js로 진행하고있습니다 ㅜㅜ
드래그해서 요소를 넣으면  [object HTMLDivElement] 라는 문구가 나오는데 어떻게 해결해야할지 갈피를 못잡겠습니다.
검색도해보고 했는데 제 힘으로 해결하기 벅차네요..

문제의 해당 코드부분입니다.

function drop(e) {
    e.preventDefault();
    const productItem = document.querySelectorAll('.product-item');

    const test = productItem;
    var data = e.dataTransfer.getData('id');

    for (var i = 0; i < productItem.length; i++) {
      if (productItem[i].dataset.id === data) {
        dragTitle.classList.add('hide');

        // e.target.innerHTML += productItem[i].innerHTML;

        // e.target.appendChild(test[i]);
        e.target.insertAdjacentHTML('beforeend', productItem);
      }
    }
  }



다음은 전체 코드입니다.

function init() {
  const searchForm = document.querySelector('.search-form');
  const search = document.querySelector('.search');
  const productList = document.querySelector('.product-list');
  const dragScreen = document.querySelector('.drag-screen');
  const dragTitle = document.querySelector('.drag-screen-title');

  let products = [];
  let cart = [];

  // 상품 가져오기
  fetch('./data/store.json')
    .then((res) => res.json())
    .then((data) => {
      products = data.products;

      data.products.forEach((product) =>
        productList.insertAdjacentHTML(
          'beforeend',
          `
        <div class="product-item" draggable="true" data-id="${product.id}">
                < img src=${product.photo} alt="" />
                <h5 class="title">${product.title}</h5>
                <p class="brand">${product.brand}</p>
                <p class="price">${product.price}</p>
                <div>
                <button class="button">담기</button>
                </div>
        </div> `
        )
      );
    });

  // 상품 검색
  searchForm.addEventListener('submit', function (e) {
    var searchText = search.value;

    e.preventDefault();

    products.forEach((item) => {
      if (item.title.includes(searchText) && searchText !== '') {
        productList.innerHTML = '';

        let title = item.title;
        title = title.replace(
          item.title,
          `<span style="background : yellow">${item.title.slice(
            0,
            2
          )}</span>${item.title.slice(2)}`
        );

        productList.insertAdjacentHTML(
          'beforeend',
          `
          <div class="product-item" draggable="true" data-id="${item.id}">
                  < img src=${item.photo} alt="" />
                  <h5 class="title">${title}</h5>
                  <p class="brand">${item.brand}</p>
                  <p class="price">${item.price}</p>
                  <div>
                  <button class="button">담기</button>
                  </div>
          </div> `
        );
      }
    });
  });

  // 상품 드래그 앤 드랍

  dragScreen.addEventListener('dragover', allowDrop);
  dragScreen.addEventListener('drop', drop);
  productList.addEventListener('dragstart', dragStart);

  function allowDrop(e) {
    e.preventDefault();
  }

  function dragStart(e) {
    e.dataTransfer.setData('id', e.target.dataset.id);
  }

  function drop(e) {
    e.preventDefault();
    const productItem = document.querySelectorAll('.product-item');

    const test = productItem;
    var data = e.dataTransfer.getData('id');

    for (var i = 0; i < productItem.length; i++) {
      if (productItem[i].dataset.id === data) {
        dragTitle.classList.add('hide');

        // e.target.innerHTML += productItem[i].innerHTML;

        // e.target.appendChild(test[i]);
        e.target.insertAdjacentHTML('beforeend', productItem);
      }
    }
  }
}

init();

////// 시도했던것..

insertAdjacentHTML 대신에 
e.target.appendChild(productItem[i]);

이런식으로하면 잘 작동은하는데 기존에 있던 상품리스트중에서 드래그했던 아이템은 사라지고, 장바구니에 들어가버리네요; 예를들면 이렇게요

[정중식]

아마도 원본 배열을 건드려서 그런거 같습니다. 강사님 답안지를 보면서 좀 고쳐봤는데.. 이런식으로요 

  function drop(e) {
    e.preventDefault();
    const productItem = document.querySelectorAll('.product-item');

    var data = e.dataTransfer.getData('id');

    for (var i = 0; i < productItem.length; i++) {
      if (productItem[i].dataset.id === data) {
        dragTitle.classList.add('hide');

        carts.forEach((cart) => {
          if (cart.id.toString() === data) {
            e.target.insertAdjacentHTML(
              'beforeend',
              `
              <div class="product-item" draggable="true" ondragstart="drag(event)">
                  < img src=${cart.photo} alt="" />
                  <h5 class="title">${cart.title}</h5>
                  <p class="brand">${cart.brand}</p>
                  <p class="price">${cart.price}</p>
                  <div>
                      <button class="button">담기</button>
                  </div>
              </div>`
            );
          }
        });
      }
    }
  }

머리 빠개질것같네요

[codingapple]

잘되면 상관없습니다

[글쓴이]

글