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

Easily manipulate drag and drop in Electron
https://github.com/electron-utils/electron-drag-drop

drag-and-drop droppable electron

Last synced: about 1 year ago
JSON representation

Easily manipulate drag and drop in Electron

• Host: GitHub
• URL: https://github.com/electron-utils/electron-drag-drop
• Owner: electron-utils
• License: mit
• Created: 2017-02-03T04:06:17.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2020-05-26T01:44:05.000Z (about 6 years ago)
• Last Synced: 2024-04-25T13:02:15.067Z (about 2 years ago)
• Topics: drag-and-drop, droppable, electron
• Language: JavaScript
• Homepage:
• Size: 37.1 KB
• Stars: 31
• Watchers: 4
• Forks: 5
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# electron-drag-drop

[![Linux Build Status](https://travis-ci.org/electron-utils/electron-drag-drop.svg?branch=master)](https://travis-ci.org/electron-utils/electron-drag-drop)

[![Windows Build status](https://ci.appveyor.com/api/projects/status/h5713cd00dcpvcnl?svg=true)](https://ci.appveyor.com/project/jwu/electron-drag-drop)

[![Dependency Status](https://david-dm.org/electron-utils/electron-drag-drop.svg)](https://david-dm.org/electron-utils/electron-drag-drop)

[![devDependency Status](https://david-dm.org/electron-utils/electron-drag-drop/dev-status.svg)](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

  
Draggable Item

  
Droppable Area


  

    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');

    });

  

```

## API Reference

  - [Module: drag (renderer process)](docs/drag.md)

  - [Module: droppable (renderer process)](docs/droppable.md)

## License

MIT © 2017 Johnny Wu