Drag and Drop

Making an element draggable requires adding the draggable attribute and the dragstart event handler.

<div id="item" 
    draggable="true"
    ondragstart="event.dataTransfer.setData('text/plain', event.target.id);"
    style="width:64px; height: 64px; border: 1px solid black">
</div>

Making an element droppable requires adding the ondragover and drop event handlers.

Making an element droppable for files requires adding the drop event handler.

Each drag event has a dataTransfer property that holds the event's data. For example, you can set data in the dragstart event and read the data in the drop event.

The following example lets you drag a red square and drop it into a blue or yellow area.

<div class="d-flex">
    <div id="dropzone1" class="bg-primary" 
     style="width:150px; height: 150px">
        <div id="item" class="bg-danger" 
         style="width:50px; height: 50px">    
    </div>
</div>

<div id="dropzone2" class="bg-warning" 
     style="width:150px; height: 150px">
</div>
</div>

<script>
var drop1 = document.getElementById("dropzone1");
var drop2 = document.getElementById("dropzone2");  
var item =  document.getElementById("item");     
    
function demoOnDragOver(e) {
    e.preventDefault();
    console.log("on drop over");  
    e.dataTransfer.dropEffect = "move";
}

function demoOnDrop(e) {
   e.preventDefault();
   console.log("on drop");   
   const data = e.dataTransfer.getData("text/plain");
   e.target.appendChild(document.getElementById(data));
}    
  
item.setAttribute('draggable', true); 
item.addEventListener("dragstart", e =>{
    console.log("drag start");
    e.dataTransfer.setData("text/plain", e.target.id);
});
   
drop1.addEventListener("dragover", demoOnDragOver);
drop1.addEventListener("drop", demoOnDrop);
drop2.addEventListener("dragover", demoOnDragOver);
drop2.addEventListener("drop", demoOnDrop);
</script>

data transfer

The DataTransfer object is used to hold the data that is being dragged during a drag and drop operation. It may hold one or more data items, each of one or more data types.

Each drag event has a dataTransfer property that refers to a DataTransfer object.

event list

mobile browsers

Most mobile browsers do not support this feature, but you can implement it yourself or find a ready-made library.