# j-DragDropElement

> On drag event displays modal inside given element with text Drop & drop files here. On moving dragged files away from element or dropping dragged files modal will hide. Also on drop event exec functio

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: en
Content-SHA256: 807981153ff3aa03435fd846f8ecd4c24e27b43515d6e84c0d196623f9e40e84
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

On `drag` event displays modal inside given element with text `Drop & drop files here`. On moving dragged files away from element or dropping dragged files modal will hide. Also on `drop` event `exec` function is executed.

__Configuration__

- `exec {String}` the component executes this method if the files are dropped - `function(files, e, component)`
- `text {String}` text to display (default `empty`)

__Example__

`<ui-component name="dragdropelement" config="exec:console.log;"></ui-component>`

__Author__

- Michal Capo <capo@dasolutions.sk> and Marek Dorotovič <marek@totaljs.com>
- [License](https://www.totaljs.com/license/)

Use it with `<ui-component name="dragdropelement">`. When the component is not loaded yet, jComponent downloads it on first use from the address in `DEF.fallback` (the Componentator CDN by default). Author: Michal Capo. Source: the Componentator components repository, MIT license.

```html example.html
<ui-component name="dragdropelement" config="exec:console.log;">
	<button>Upload (drag &amp; drop file)</button>
</ui-component>
```