npm package: @scaleflex/widget-attach-dnd
Description: Attaches drag & drop zone to the specified HTML target, so any file dropped in that target would be uploaded.
Latest version: 4.8.13

# `@scaleflex/widget-attach-dnd`

[![Plugins][plugins-image]](#plugins)
[![Website][filerobot-image]][sfx-url]
[![Version][filerobot-version]][version-url]
[![Scaleflex team][made-by-image]][sfx-url]
[![License][license-image]][license-url]
[![CodeSandbox][codeSandbox-image]][codeSandbox-url]


<div align='center'>
<img title="Scaleflex Widget logo" alt="Scaleflex Widget logo" src="https://assets.scaleflex.com/Corporate+Branding/%5B2025%5D+ALL+LOGOS+%2B+ICONS/SCALEFLEX/VXP+logo/Horizontal+White/VXP+logo+WHITE.png?vh=663932" width="140"/>
</div>


Attaches drag & drop (dnd) zone of the Scaleflex widget to some HTML element of your page [Scaleflex Media Asset Widget](https://www.npmjs.com/package/@scaleflex/widget-core).

> Note: This plugin requires [@scaleflex/widget-explorer](../@scaleflex/widget-explorer) plugin to be existed & used in the widget, as the `attach-dnd` plugin role is only attaching the drag & drop zone to some element of your page and the rest is handled through the explorer & widget.

## Usage

### NPM

```bash
npm install --save @scaleflex/widget-attach-dnd
```

### YARN

```bash
yarn add @scaleflex/widget-attach-dnd
```

then

```js
import AttachDragAndDrop from '@scaleflex/widget-attach-dnd'
...
...
...
scaleflexWidget.use(AttachDragAndDrop, propertiesObject)
```

### CDN

If installed via a [CDN link](../@scaleflex/widget-core#installation), the plugin is inside the `ScaleflexWidget` global object as `ScaleflexWidget.AttachDnD`

```js
const AttachDragAndDrop = window.ScaleflexWidget.AttachDnD
...
...
...
scaleflexWidget.use(AttachDragAndDrop, propertiesObject)
```

## Properties

Required attributes are marked with ***(Required)***.

### `target`

<u>Type:</u> `string or HTML Element` **_Required_**.

<u>Default:</u> `document.body`

The selector (ID, Class) of an HTML element or an existed HTML element that would be attached with the drag & drop zone, also the drop hint would be shown to this target selector's element, by default it's the body of the document page.

### `fixedDropHint`

<u>Type:</u> `boolean`.

<u>Default:</u> `false`

If set to `true`, the drop hint shown while dragging the file/folder on the `target` element would be in a fixed position.

> Note: it might be useful to use this property if your page scroll and the drop zone doesn't keep in the same scroll position.

### `noDropHint`

<u>Type:</u> `boolean`.

<u>Default:</u> `false`

If you don't want to show the drop hint shown while dragging the file/folder over the target element then provide `true` value here, otherwise it would be shown normally.


<!-- Variables -->

[npm-url]: https://www.npmjs.com/package/@scaleflex/widget-attach-dnd
[license-url]: https://opensource.org/licenses/MIT
[sfx-url]: https://www.scaleflex.com/
[version-url]: https://www.npmjs.com/package/@scaleflex/widget-attach-dnd
[codeSandbox-url]: https://codesandbox.io/p/sandbox/scalelfex-widget-v4-sandbox-dtp6l3?file=%2Fsrc%2Findex.js


[npm-image]: https://img.shields.io/npm/v/@telus/remark-config.svg?style=for-the-badge&logo=npm
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge
[made-by-image]: https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg?style=for-the-badge
[plugins-image]: https://img.shields.io/static/v1?label=Scaleflex&message=Plugins&color=yellow&style=for-the-badge
[filerobot-image]: https://img.shields.io/static/v1?label=Scaleflex&message=website&color=orange&style=for-the-badge
[filerobot-version]: https://img.shields.io/npm/v/@scaleflex/widget-attach-dnd?label=Version&style=for-the-badge&logo=npm
[codeSandbox-image]: https://img.shields.io/badge/CodeSandbox-black?style=for-the-badge&logo=CodeSandbox