❤
npm
Sign UpSign In

electron-drag-drop

1.1.0 • Public • Published

electron-drag-drop

Linux Build Status Windows Build status Dependency Status devDependency Status

Easily manipulate drag and drop in Electron.

Install

npm install --save electron-drag-drop

Run Examples:

npm start example

Usage

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>

API Reference

License

MIT © 2017 Johnny Wu

Readme

Keywords

Package Sidebar

Install

npm i electron-drag-drop

Repository

github.com/electron-utils/electron-drag-drop

Homepage

github.com/electron-utils/electron-drag-drop

Weekly Downloads

4

Version

1.1.0

License

MIT

Last publish

Collaborators

  • johnnywu
Try on RunKit
Report malware