<div class="container">
<div class="d-flex">
<div class="target" id="target"></div>
<div class="box" draggable="true">drag me</div>
</div>
</div>.target{
width: 300px;
height: 200px;
border: 2px dashed gray;
margin:20px;
padding:10px;
}
.box{
width: 200px;
height: 150px;
background: pink;
padding:20px;
}$(".box").on({
"dragstart": function(){
console.log("dragstart");
},
"dragend": function(){
console.log("dragend");
}
})
$("#target").on({
"dragenter": function(){
console.log("dragenter");
},
"dragover": function(){
console.log("dragover");
},
"dragleave": function(){
console.log("dragleave");
},
"drop": function(){
console.log("drop");
}
})