<div draggable="true" ondragstart="drag(event)" id="divdrag">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRx-IaGCcgegO-0G9ErGIeA8fcEGtFoKltyyP6-6zRIps_Q8adxrg" draggable="false"/>
    <p>Logo</p>
</div>
<div id="box" ondrop="drop(event)" ondragover="allowDrop(event)" style="border:2px solid pink; width: 100%; height: 200px"></div>
function allowDrop(ev) {
    ev.preventDefault();
}
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
    //Gọi hàm này để ngăn cản browser xử lý mặc định sự kiện drop (ví dụ mở link)
    ev.preventDefault(); 
    
    //Lấy dữ liệu text thả vào - chính là ID phần tử kéo đã lưu ở trên
    var data = ev.dataTransfer.getData("text"); 
    
    //Di chuyển phần tử kéo vào phần tử thả
  ev.target.appendChild(document.getElementById(data));
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.