electron-drag-drop
Version:
Easily manipulate drag and drop in Electron.
76 lines (55 loc) • 2.02 kB
Markdown
# electron-drag-drop
[](https://travis-ci.org/electron-utils/electron-drag-drop)
[](https://ci.appveyor.com/project/jwu/electron-drag-drop)
[](https://david-dm.org/electron-utils/electron-drag-drop)
[](https://david-dm.org/electron-utils/electron-drag-drop#info=devDependencies)
Easily manipulate drag and drop in Electron.
## Install
```bash
npm install --save electron-drag-drop
```
## Run Examples:
```bash
npm start example
```
## Usage
**main process**
```javascript
// IMPORTANT: electron-drag-drop needs init in main process for broadcasting ipc messages.
// init drag-drop in main process
require('electron-drag-drop');
```
**renderer process**
```html
<body>
<div id="drag" draggable="true">Draggable Item</div>
<div id="drop" droppable="foobar" multi >Droppable Area</div>
<script>
const {drag, droppable, addon} = require('electron-drag-drop');
// drag
let dragEL = document.getElementById('drag');
dragEL.addEventListener('dragstart', event => {
drag.start(event.dataTransfer, {
effect: 'copy',
type: 'foobar',
items: 'Hello World!',
});
});
dragEL.addEventListener('dragend', event => {
drag.end();
});
// drop
let dropEL = document.getElementById('drop');
addon(dropEL, droppable);
dropEL._initDroppable(dropEL);
dropEL.addEventListener('drop-area-move', event => {
drag.updateDropEffect(event.detail.dataTransfer, 'copy');
});
</script>
</body>
```
## API Reference
- [Module: drag (renderer process)](docs/drag.md)
- [Module: droppable (renderer process)](docs/droppable.md)
## License
MIT © 2017 Johnny Wu