e.target.dataset._id가 undefined로 나옵니다

e.target.dataset.id를 출력했을때 담기버튼을 눌렀을땐 id가 console.log로 확인이 가능한데 dragstart에선 undefined가 뜹니다.

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

$.get('./store.json').then(function (data) {
  products = data.products;
  // 상품 생성(json 파일 갯수만큼 추가)
  data.products.forEach((a, i) => {
    var 카드_템플릿 = `
    <div class="col-sm-3">
      <div class="item" draggable="true" data-id="${a.id}">
        < img src="${data.products[i].photo}"  style="width: 90%; height: auto;">
        <h5>${data.products[i].title}</h5>
        <span>${data.products[i].brand}</span>
        <p>가격 : ${data.products[i].price}</p>
        <button class="add" data-id="${data.products[i].id}">담기</button>
      </div>
    </div>`
    $('.productLine').append(카드_템플릿);
    // console.log(data.products[i].id)

  })

  // 담기 버튼 눌렀을때
  $('.add').click(function (e) {
    let productId = e.target.dataset.id;
    console.log(productId)
    let 몇번째 = cart.findIndex((a) => { return a.id == productId })

    if (몇번째 == -1) {
      let 현재상품 = products.find((a) => { return a.id == productId });
      현재상품.count = 1;
      cart.push(현재상품);
    } else {
      cart[몇번째].count++;
    }

    $('.basket-area').html('');
    cart.forEach((a, i) => {
      var 카드_템플릿 = `
      <div class="col-sm-3">
      <div class="item" "draggable="true">
        < img src="${a.photo}" style="width: 90%; height: auto;">
        <h5>${a.title}</h5>
        <span>${a.brand}</span>
        <p>가격 : ${a.price}</p>
        <input type="number" value="${a.count}" class="item-count w-100">
        </div>
        </div>`;
      $('.basket-area').append(카드_템플릿);
    });
  })

  //드래그 장바구니 추가
  $('.item').on('dragstart', function(e){
    let a = e.target.dataset.id;
    console.log(a)
    e.originalEvent.dataTransfer.setData('id', e.target.dataset.id)
  });
  $('.basket-area').on('dragover', function (e) {
    e.preventDefault();
  });
  $('.basket-area').on('drop', function (e) {
    let productId = e.originalEvent.dataTransfer.getData('id');
    console.log(productId)
  })

  // 검색 기능
  $(".input").on("keyup", function (e) {
    data.products.forEach((a, i) => {
      if (data.products[i].title.indexOf(e.target.value) != -1 || data.products[i].brand.indexOf(e.target.value) != -1) {
        let searchInput = e.target.value;
        let searchTitle = data.products[i].title;
        let searchTitle2 = searchTitle.replace(searchInput, `<span style="background : yellow">${searchInput}</span>`)
        $('.productLine').html('');
        var 카드_템플릿 = `
          <div class="col-sm-3">
          <div class="item" "draggable="true">
            < img src="${data.products[i].photo}" style="width: 90%; height: auto;">
            <h5>${searchTitle}</h5>
            <span>${data.products[i].brand}</span>
            <p>가격 : ${data.products[i].price}</p>
            <button class="add" data-id="${a.id}">담기</button>
            </div>
            </div>`;
        $('.productLine').append(카드_템플릿);
        $('.col-sm-3 > h5').html(searchTitle2);
      }
    })
    // 검색기능(입력값과 동일 한것이 없을때 기존의 상품목록 불러오기)
    if (e.target.value === "" || e.target.value === undefined) {
      $('.productLine').html('');
      data.products.forEach((a, i) => {
        var 카드_템플릿 = `
              <div class="col-sm-3">
              <div class="item" "draggable="true" >
                < img src="${data.products[i].photo}" style="width: 90%; height: auto;">
                <h5>${data.products[i].title}</h5>
                <span>${data.products[i].brand}</span>
                <p>가격 : ${data.products[i].price}</p>
                <button class="add" data-id="${a.id}">담기</button>
                </div>
                </div>`;
        $('.productLine').append(카드_템플릿);
      })
    }
  })
})