<!-- Search & Product List -->
<div class="container">
<div class="row" id="card-box">
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
</div>
<!-- Cart -->
<div class="container">
<div>장바구니</div>
<div id="cart">여기로 드래그</div>
</div>
</div>
<script>
var productsName = []
$.get('store.json').done(function (data) {
for (let i = 0; i < Object.keys(data.products).length; i++) {
productsName[i] = data.products[i].title
var cardTemplate = `<div class="card m-2 border-0 rounded-0" draggable="true" style="width: 100%;">
< img src=${data.products[i].photo} class="card-img-top rounded-0" alt="...">
<div class="card-body rounded-0">
<h5 class="card-title fw-bold">${data.products[i].title}</h5>
<h6 class="card-subtitle mb-2 text-muted">${data.products[i].brand}</h6>
<p class="card-text fs-5">가격 : ${data.products[i].price}</p>
<a href="#" class="btn btn-dark">담기</a>
</div>
</div>`
$('.col-3').eq(i).append(cardTemplate);
}
})
$('.card').on('dragstart', function(e){
e.preventDefault();
console.log('drag start');
})
document.getElementById('cart').addEventListener('dragover', (e) => {
e.preventDefault();
console.log('drag over');
})
document.getElementById('cart').addEventListener('drop', (e) => {
e.preventDefault();
console.log('dropped');
})
</script>
안녕하세요 선생님 위의 코드 중 dragstart 이벤트리스너가 동작하지 않아서 질문드립니다.
dragover와 drop 이벤트는 정상적으로 동작하는데, dragstart만 안됩니다.
windows.onload = function() {} 안에 집어넣으라는 말을 보고 그렇게 했더니 dragstart는 실행됩니다.
그러나 이 경우에는 draggable="true" 요소를 드래그할때 뜨는 반투명한 요소가 안 뜨고요, dragover와 drop 이벤트도 동작하지 않습니다.
어디를 고쳐야 세 이벤트가 모두 정상작동할까요?
<div id="__endic_crx__">
<div class="css-diqpy0"> </div>
</div>
