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.

property description
dropEffect Controls the feedback (typically visual) the user is given during a drag and drop operation. The possible values are:
  • "copy" - a copy of the source item is made at the new location
  • "move" - an item is moved to a new location
  • "link" - a link is established to the source at the new location
  • "none" - the item may not be dropped
effectAllowed Specifies the effect that is allowed for a drag operation. The possible values are:
  • "none" - item may not be dropped
  • "copy" - a copy of the source item may be made at the new location
  • "copyLink" - a copy or link operation is permitted
  • "copyMove" - a copy or move operation is permitted
  • "link" - a link may be established to the source at the new location
  • "linkMove" - a link or move operation is permitted
  • "move" - an item may be moved to a new location
  • "all" - all operations are permitted
  • "uninitialized" - the default value when the effect has not been set, equivalent to all
files A list of the files in the drag operation.
items A list of the data transfer items in a drag operation.
types An array of the drag data types that were set in the dragstart event. Type of the data, generally given by a MIME type.
method description
clearData([type]) Removes the drag operation's drag data for the given type.
getData(type) Retrieves the data for a given type, or an empty string if data for that type does not exist or the data transfer contains no data.
setData(type, data) Sets the drag operation's drag data to the specified data and type. If data for the given type does not exist, it is added at the end of the drag data store, such that the last item in the types list will be the new type. If data for the given type already exists, the existing data is replaced in the same position.
setDragImage(img|element, x, y)

Sets the custom image to be used for dragging.

The x and y coordinates define how the image should appear relative to the mouse pointer.

event list

event description
ondrag Fires when an element is dragged.
ondragend Fires at the end of a drag operation.
ondragenter Fires when an element has been dragged to a valid drop target.
ondragleave Fires when an element leaves a valid drop target.
ondragover Fires when an element is being dragged over a valid drop target.
ondragstart Fires at the start of a drag operation.
ondrop Fires when dragged element is being dropped.

mobile browsers

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