# Module: droppable (renderer process)
Addon this module to an exists HTMLElmement or assign it to the prototype of a CustomElement.
Addon to an exists HTMLElmement:
```html
Drop Area
```
Assign it to the prototype of a CustomElement:
```javascript
const {droppable, addon} = require('electron-drag-drop');
class MyElement extends window.HTMLElement {
constructor () {
super();
this.attachShadow({
mode: 'open'
});
this.shadowRoot.innerHTML = `
Drop Area
`;
this.$droparea = this.shadowRoot.querySelector('.drop-area');
this._inited = false;
}
connectedCallback () {
if ( this._inited ) {
return;
}
this._inited = false;
this._initDroppable(this.$droparea);
}
}
addon(MyElement.prototype, droppable);
window.customElements.define('my-element', MyElement);
```
## Methods
### _initDroppable ( dropAreaElement )
- `dropAreaElement` HTMLElmement
## Properties
### droppable (string)
### multi (boolean)
### canDrop (boolean)
## Events
### drop-area-enter
- `detail` object
- `target` HTMLElmement
- `dataTransfer` DataTransfer
- `clientX` number
- `clientY` number
- `offsetX` number
- `offsetY` number
- `dragType` string
- `dragItems` array
- `dragOptions` object
### drop-area-leave
- `detail` object
- `target` HTMLElmement
- `dataTransfer` DataTransfer
### drop-area-accept
- `detail` object
- `target` HTMLElmement
- `dataTransfer` DataTransfer
- `clientX` number
- `clientY` number
- `offsetX` number
- `offsetY` number
- `dragType` string
- `dragItems` array
- `dragOptions` object
### drop-area-move
- `detail` object
- `target` HTMLElmement
- `dataTransfer` DataTransfer
- `clientX` number
- `clientY` number
- `offsetX` number
- `offsetY` number
- `dragType` string
- `dragItems` array
- `dragOptions` object