mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

docs: revised the drag and drop feature page (#25939)

Browse source 
* docs: revised the drag and drop feature page

* docs: fixed mentions in the drag and drop feature page

* docs: fixed mentions in the drag and drop feature page
This commit is contained in:
Antonio 2020-10-16 05:14:16 +03:00 committed by GitHub
parent 46f3491c7d
commit 55fdc1795c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
docs/images/drag-and-drop.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 MiB

45
docs/tutorial/native-file-drag-drop.md
View file

@ -1,29 +1,44 @@
# Native File Drag & Drop
## Overview
Certain kinds of applications that manipulate files might want to support
the operating system's native file drag & drop feature. Dragging files into
web content is common and supported by many websites. Electron additionally
supports dragging files and content out from web content into the operating
system's world.
To implement this feature in your app, you need to call `webContents.startDrag(item)`
To implement this feature in your app, you need to call the
[`webContents.startDrag(item)`](../api/web-contents.md#contentsstartdragitem)
API in response to the `ondragstart` event.
In your renderer process, handle the `ondragstart` event and forward the
information to your main process.
## Example
Starting with a working application from the
[Quick Start Guide](quick-start.md), add the following lines to the
`index.html` file:
```html
<a href="#" id="drag">item</a>
<script type="text/javascript" charset="utf-8">
document.getElementById('drag').ondragstart = (event) => {
event.preventDefault()
ipcRenderer.send('ondragstart', '/path/to/item')
}
</script>
<a href="#" id="drag">Drag me</a>
<script src="renderer.js"></script>
```
Then, in the main process, augment the event with a path to the file that is
being dragged and an icon.
and add the following lines to the `renderer.js` file:
```js
const { ipcRenderer } = require('electron')
document.getElementById('drag').ondragstart = (event) => {
event.preventDefault()
ipcRenderer.send('ondragstart', '/absolute/path/to/the/item')
}
```
The code above instructs the Renderer process to handle the `ondragstart` event
and forward the information to the Main process.
In the Main process(`main.js` file), expand the received event with a path to the file that is
being dragged and an icon:
```javascript
const { ipcMain } = require('electron')
@ -35,3 +50,9 @@ ipcMain.on('ondragstart', (event, filePath) => {
})
})
```
After launching the Electron application, try to dragging and dropping
the item from the BroswerWindow onto your desktop. In this guide,
the item is a Markdown file located in the root of the project:
![Drag and drop](../images/drag-and-drop.gif)