dragstart

16 March, 2023

Contributors

Milsaware

@milsaware

About

The dragstart event is triggered when an element, such as an image or a text selection, is picked up and dragged by the user. This event is commonly used in app development for implementing drag-and-drop functionality.

When a dragstart event is triggered, the browser creates a "drag image" of the element being dragged and attaches it to the mouse cursor. The browser also sets a data transfer object that can be used to pass data between the source element and the target element during the drag-and-drop operation.

Event listener

To use the dragstart event, you need to add an event listener to the element that you want to make draggable:

HTML

<img src="https://via.placeholder.com/150" id="drag-image" alt="Draggable Image" draggable="true">
<div id="drop-zone">Drop zone</div>

JavaScript

const dragImage = document.getElementById('drag-image');
const dropZone = document.getElementById('drop-zone');

dragImage.addEventListener('dragstart', (event) => {
    event.dataTransfer.setData('text/plain', 'Hello World!');
});

dropZone.addEventListener('dragover', (event) => {
    event.preventDefault();
});

dropZone.addEventListener('drop', (event) => {
    event.preventDefault();
    const data = event.dataTransfer.getData('text/plain');
    dropZone.textContent = data;
});

Here, we have an image element with the ID drag-image and a div element with the ID drop-zone. We attach a dragstart event listener to the image element that sets the data transfer object to a plain text string ("Hello World!").

We also attach dragover and drop event listeners to the drop-zone element. The dragover event listener prevents the default behaviour of the browser when an element is being dragged over it, and the drop event listener retrieves the data from the data transfer object and sets the text content of the drop-zone element to the data.

Property

Here's an example of using the ondragstart property to change the style of an image element when it's dragged:

const myImage = document.getElementById('myImage');

// Set the dragstart event listener
myImage.addEventListener('dragstart', dragStart);

// Define the dragstart event handler
function dragStart(event) {
    // Set the data to be dragged
    event.dataTransfer.setData('text/plain', event.target.id);

    // Change the style of the element being dragged
    event.target.style.opacity = '0.5';
}

Here, we use the document.getElementById method to get a reference to the myImage element. We add an event listener for the dragstart event using the addEventListener method and pass in the dragStart function as the event handler.

In the dragStart function, we set the data to be dragged using the event.dataTransfer.setData method and change the opacity of the element being dragged using the event.target.style.opacity property.

Inline

You can also use the dragstart event inline in your HTML code using the ondragstart attribute. Here's an example:

<img src="example.jpg" alt="Example Image" ondragstart="event.dataTransfer.setData('text/plain', 'Hello World!');" draggable="true" />

Here, we've added the ondragstart attribute to an img element. The attribute value is a JavaScript expression that sets the data transfer object to a plain text string ("Hello World!"). When the user starts dragging the image, the dragstart event will be triggered, and the JavaScript expression will be executed.

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 method

There is no dragstart() method in JavaScript. The dragstart event is triggered automatically by the browser when the user starts dragging an element that has the draggable attribute set to true.

However, you can simulate the dragstart event programmatically using the dispatchEvent() method. Here's an example:

const myImage = document.getElementById('myImage');

myImage.addEventListener('dragstart', (event) => {
    console.log('Drag started!');
});

const event = new Event('dragstart');
myImage.dispatchEvent(event);

Here, we have an img element with the ID myImage that has the draggable attribute set to true. We attach a dragstart event listener to the image element that logs a message to the console when the event is triggered.

We then create a new dragstart event using the Event() constructor and dispatch it manually to the myImage element using the dispatchEvent() method. This will trigger the dragstart event and log the message to the console.

Note that manually dispatching events is not something you should do very often, as it can be confusing and hard to maintain. It's generally better to let the browser handle events naturally by letting the user interact with the draggable elements.

javascript

draganddrop