@scaleflex/widget-attach-dnd

@scaleflex/widget-attach-dnd

Attaches drag & drop (dnd) zone of the Scaleflex widget to some HTML element of your page Scaleflex Media Asset Widget.

Note: This plugin requires @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

npm install --save @scaleflex/widget-attach-dnd

YARN

yarn add @scaleflex/widget-attach-dnd

then

import AttachDragAndDrop from '@scaleflex/widget-attach-dnd'
...
...
...
scaleflexWidget.use(AttachDragAndDrop, propertiesObject)

CDN

If installed via a CDN link, the plugin is inside the ScaleflexWidget global object as ScaleflexWidget.AttachDnD

const AttachDragAndDrop = window.ScaleflexWidget.AttachDnD
...
...
...
scaleflexWidget.use(AttachDragAndDrop, propertiesObject)

Properties

Required attributes are marked with (Required).

target

Type: string or HTML Element Required.

Default: 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

Type: boolean.

Default: 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

Type: boolean.

Default: 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.