Linux Build Status Windows Build status Dependency Status devDependency Status
Easily manipulate drag and drop in Electron.
npm install --save electron-drag-drop
npm start example
main process
// 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
<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>
MIT © 2017 Johnny Wu