Unregistered elements

How the element adapter works with draggable elements that are not registered

About Drag previews Unregistered elements Other utilities

Any HTMLElement can become draggable in the browser by adding the attribute draggable="true" to that element. Additionally, <a> and <img> elements are draggable by default (as if they had draggable="true" set on them).

The element adapter is only activated by explicitly registered elements (ie draggable({element})). The element adapter will not be activated by other draggable elements on the page.

If you want the element adapter to be activated by any element (including <a> or <img> elements), then you need to register it as a draggable()

import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';

draggable({
    element: myAnchor,
});

Disable default dragging of anchors and images

If you want to disable browsers default setting of draggable="true" on <a> and <img> elements, you can set draggable="false"

<a href="/home" draggable="false">Home</a>

External data for anchors and images

When dragging a <a> or <img> element, they will automatically attach some data for external consumers. For example <a> will attach "text/uri-list" matching the dragging URL.

Registering anchors or images as a draggable() does not impact this default assignment of external data

import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';

// "text/plain" and "text/uri-list" external data will automatically be attached
// by the browser
draggable({
    element: myAnchor,
});

You can change the default external data values by using getInitialDataForExternal()

import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';

draggable({
    element: myAnchor,
    getInitialDataForExternal: () => ({
        // overiding the standard "text/uri-list" value
        'text/uri-list': someOtherUrl,
        // adding some new value
        'application/x.something-custom': myCustomData,
    }),
});

Drag previews for anchors and images

Browsers will automatically generate a drag preview when dragging <a> or <img> elements, even when those elements are registered as a draggable().

You can control this drag preview in the same way you could any other element. See drag previews.

Was this page helpful?

We use this feedback to improve our documentation.