drag

16 March, 2023

Contributors

Milsaware

@milsaware

About

The drag event is a DOM event that is triggered when an element or text selection is being dragged with a pointing device, such as a mouse or trackpad. The drag event is the main event in a series of events that are fired during a drag-and-drop operation, which allows the user to move content between different locations in a page.

The drag event is followed by a number of related events, such as dragstart, dragenter, dragover, dragleave, drop, and dragend, which are used to track the progress of the drag-and-drop operation and allow for customisation of the behaviour.

Event listener

You can use the addEventListener() method to add a drag event listener to an element:

HTML

<div id="myDiv" draggable="true">Drag Me!</div>

JavaScript

const myDiv = document.getElementById("myDiv");

myDiv.addEventListener("drag", function(event) {
    console.log("Drag in progress!");
});

Here, we have a <div> element with an id of "myDiv" and the draggable attribute set to true. We use the getElementById() method to get a reference to this element in JavaScript. We then add a drag event listener to this element using the addEventListener() method. Inside the callback function, we use the console.log() method to log a message to the console when the drag event is fired.

Note that the drag event is not triggered when the user starts dragging an element. Instead, the dragstart event is fired when the user initiates a drag-and-drop operation. The drag event is fired repeatedly while the drag-and-drop operation is in progress, and the dragend event is fired when the user drops the element or cancels the operation.

Property

Here is an example of using the ondrag property to listen for the drag event:

// Get the element with the id "drag-me"
const dragMe = document.getElementById("drag-me");

// Attach the drag event handler to the element
dragMe.ondrag = drag;

// Define the drag event handler function
function drag(event) {
    event.dataTransfer.setData("text", event.target.id);
}

Here, we're selecting the div element with the id of drag-me using document.getElementById(). We're then defining a function called drag() that will be executed when the element is being dragged. Finally, we're attaching drag() to the ondrag property of dragMe.

Note that in the drag() function, we're using the dataTransfer.setData() method to set the data to be transferred during the drag operation. In this case, we're setting the data to the ID of the element being dragged. This data can be retrieved in the drop event handler function using the dataTransfer.getData() method.

Inline

You can also use the drag event inline in HTML using the ondrag attribute:

HTML

<div id="drag-me" ondrag="drag(event)">Drag me!</div>

JavaScript

function drag(event) {
    event.dataTransfer.setData("text", event.target.id);
}

Here, the div element with the id of drag-me has an ondrag property that calls the drag() function when the element is being dragged. The drag() function sets the data to be transferred during the drag operation using the dataTransfer.setData() method. In this case, we're setting the data to the ID of the element being dragged.

The ondrag property is just one of several drag-related events that can be used in JavaScript, including ondragstart, ondragenter, ondragover, ondragleave, ondragend, and ondrop. Each of these events provides different ways to handle drag and drop operations on HTML elements.

Note that using inline event handlers can make your code harder to read and maintain, especially if you have a lot of them. It's generally considered better practice to separate your JavaScript code from your HTML code by using event listeners.

Programmatic trigger

There is no built-in drag() method in JavaScript. The drag event is a user-driven event, triggered when the user initiates a drag-and-drop operation on an element using a pointing device such as a mouse or touch screen.

However, you can programmatically trigger the dragstart, dragenter, dragover, dragleave, drop, and dragend events that are fired during a drag-and-drop operation. To trigger these events, you can use the dispatchEvent() method to create a new event object and then dispatch it to the target element.

Here's an example of how to programmatically trigger the dragstart event on a <div> element:

const myDiv = document.getElementById("myDiv");

// create a new dragstart event
let event = new DragEvent("dragstart", {
    dataTransfer: new DataTransfer()
});

// dispatch the event to the target element
myDiv.dispatchEvent(event);

Here, we first use the getElementById() method to get a reference to a <div> element with an id of "myDiv". We then create a new DragEvent object for the dragstart event, and specify a dataTransfer object for the event. Finally, we use the dispatchEvent() method to dispatch the dragstart event to the target element.

Note that programmatically triggering drag-and-drop events can be useful for testing or simulating user interactions in automated scripts, but it is generally not recommended to use this approach to initiate drag-and-drop operations in production code, as it may conflict with the user's expectations and accessibility needs.

javascript

draganddrop