웹개발 예제에서 드래그 드롭 이해가 안됩니다

[병아리짹짹]

html 쪽에서는 장바구니 쪽에 
<div class="backet" ondrop="drop(event)" ondragover="allowdrop(event)">
    <span>장바구니(드래그 가능)</span>
    </div>
이라고 했고

js쪽에서는 html추가할 때는 
<div class="card-column" draggable="true" data-id="${a.id}" ondragstart="drag(event)">

쓰고 


function allowDrop(ev) {
    ev.preventDefault();
  }
  
  function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
  }
  
  function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
  }

$(".card-column").on("dragstart", function(e){
    e.originalEvent.dataTransfer.setData('id', e.target.dataset.id)
});
$(".basket").on("dragover",function(e){
e.preventDefault();
});
$(".basket").on("drop", function(e){
    let productId = e.originalEvent.dataTransfer.getData('id');
        console.log(productId)
})

라고 했는데 오류가 계속 뜹니다


contest.html:59 Uncaught ReferenceError: allowdrop is not defined
    at HTMLDivElement.ondragover


allowdrop에서 ev.preventDefault();가 안 먹힌건가요

그리고 이것 뿐만이 아니더라도 드래그 앤 드롭 쓰는 매커니즘 자체가 이해가 안됩니다

[codingapple]

allowdrop 말고 allowDrop을 씁시다
dragstart dragover drop 이벤트 발생할 때마다 뭐해주고싶은지 코드짜는 것일 뿐입니다

[글쓴이]

글