Home Explore 引导页 在线工具 Blog
Register Sign In
Pchen0
/
electron
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

docs: update drag and drop tutorial (#29217)

* Working

* Working

* Make the native-file drag and drop documents use context bridge

* Add per-file sections

* Use the updated link format

* Use path.join instead of string interpolation.

Co-authored-by: Antón Molleda <[email protected]>

* Use fs.promises

Co-authored-by: Antón Molleda <[email protected]>

* Update docs/tutorial/native-file-drag-drop.md

Co-authored-by: Antón Molleda <[email protected]>

* fix formatting

Co-authored-by: Antón Molleda <[email protected]>

* Update docs/tutorial/native-file-drag-drop.md

Co-authored-by: Antón Molleda <[email protected]>

* Use more path.join instead of interpolation

* Update with PR suggestions

* Remove process.cwd() and add more example elements

* Minor text fix

* Fix typo

Co-authored-by: Erick Zhao <[email protected]>

Co-authored-by: Tony Ferrell <[email protected]>
Co-authored-by: Tony Ferrell <[email protected]>
Co-authored-by: Antón Molleda <[email protected]>
Co-authored-by: Erick Zhao <[email protected]>
trop[bot] 3 years ago
parent
8e40d97538
commit
8a0f89cfae
5 changed files with 62 additions and 32 deletions
Split View Show Diff Stats
  1. 3 6
      docs/fiddles/features/drag-and-drop/index.html
  2. 16 9
      docs/fiddles/features/drag-and-drop/main.js
  3. 8 0
      docs/fiddles/features/drag-and-drop/preload.js
  4. 6 6
      docs/fiddles/features/drag-and-drop/renderer.js
  5. 29 11
      docs/tutorial/native-file-drag-drop.md

+ 3 - 6
docs/fiddles/features/drag-and-drop/index.html
View File 

@@ -7,12 +7,9 @@
 
 </head>
 
 <body>
 
     <h1>Hello World!</h1>
 
-    <p>
 
-        We are using node <script>document.write(process.versions.node)</script>,
 
-        Chrome <script>document.write(process.versions.chrome)</script>,
 
-        and Electron <script>document.write(process.versions.electron)</script>.
 
-    </p>
 
-    <a href="#" id="drag">Drag me</a>
 
+    <p>Drag the boxes below to somewhere in your OS (Finder/Explorer, Desktop, etc.) to copy an example markdown file.</p>
 
+    <div style="border:2px solid black;border-radius:3px;padding:5px;display:inline-block" draggable="true" id="drag1">Drag me - File 1</div>
 
+    <div style="border:2px solid black;border-radius:3px;padding:5px;display:inline-block" draggable="true" id="drag2">Drag me - File 2</div>
 
     <script src="renderer.js"></script>
 
 </body>
 
 </html>

+ 16 - 9
docs/fiddles/features/drag-and-drop/main.js
View File 

@@ -1,21 +1,28 @@
 
 const { app, BrowserWindow, ipcMain, nativeImage, NativeImage } = require('electron')
 
-const fs = require('fs');
 
-const http = require('http');
 
+const path = require('path')
 
+const fs = require('fs')
 
+const https = require('https')
 
 
-function createWindow () {
 
+function createWindow() {
 
   const win = new BrowserWindow({
 
     width: 800,
 
     height: 600,
 
     webPreferences: {
 
-      nodeIntegration: true
 
+      preload: path.join(__dirname, 'preload.js')
 
     }
 
   })
 
 
   win.loadFile('index.html')
 
 }
 
-const iconName = 'iconForDragAndDrop.png';
 
-const icon = fs.createWriteStream(`${process.cwd()}/${iconName}`);
 
-http.get('http://img.icons8.com/ios/452/drag-and-drop.png', (response) => {
 
+
 
+const iconName = path.join(__dirname, 'iconForDragAndDrop.png');
 
+const icon = fs.createWriteStream(iconName);
 
+
 
+// Create a new file to copy - you can also copy existing files.
 
+fs.writeFileSync(path.join(__dirname, 'drag-and-drop-1.md'), '# First file to test drag and drop')
 
+fs.writeFileSync(path.join(__dirname, 'drag-and-drop-2.md'), '# Second file to test drag and drop')
 
+
 
+https.get('https://img.icons8.com/ios/452/drag-and-drop.png', (response) => {
 
   response.pipe(icon);
 
 });
 
 
@@ -23,8 +30,8 @@ app.whenReady().then(createWindow)
 
 
 ipcMain.on('ondragstart', (event, filePath) => {
 
   event.sender.startDrag({
 
-    file: filePath,
 
-    icon: `${process.cwd()}/${iconName}`
 
+    file: path.join(__dirname, filePath),
 
+    icon: iconName,
 
   })
 
 })

+ 8 - 0
docs/fiddles/features/drag-and-drop/preload.js
View File 

@@ -0,0 +1,8 @@
 
+const { contextBridge, ipcRenderer } = require('electron')
 
+const path = require('path')
 
+
 
+contextBridge.exposeInMainWorld('electron', {
 
+  startDrag: (fileName) => {
 
+    ipcRenderer.send('ondragstart', fileName)
 
+  }
 
+})

+ 6 - 6
docs/fiddles/features/drag-and-drop/renderer.js
View File 

@@ -1,9 +1,9 @@
 
-const { ipcRenderer } = require('electron')
 
-const fs = require('fs')
 
+document.getElementById('drag1').ondragstart = (event) => {
 
+  event.preventDefault()
 
+  window.electron.startDrag('drag-and-drop-1.md')
 
+}
 
 
-document.getElementById('drag').ondragstart = (event) => {
 
-  const fileName = 'drag-and-drop.md'
 
-  fs.writeFileSync(fileName, '# Test drag and drop');
 
+document.getElementById('drag2').ondragstart = (event) => {
 
   event.preventDefault()
 
-  ipcRenderer.send('ondragstart', process.cwd() + `/${fileName}`)
 
+  window.electron.startDrag('drag-and-drop-2.md')
 
 }

+ 29 - 11
docs/tutorial/native-file-drag-drop.md
View File 

@@ -14,30 +14,46 @@ API in response to the `ondragstart` event.
 
 
 ## Example
 
 
-Starting with a working application from the
 
-[Quick Start Guide](quick-start.md), add the following lines to the
 
-`index.html` file:
 
+An example demonstrating how you can create a file on the fly to be dragged out of the window.
 
+
 
+### Preload.js
 
+
 
+In `preload.js` use the [`contextBridge`] to inject a method `window.electron.startDrag(...)` that will send an IPC message to the main process.
 
+
 
+```js
 
+const { contextBridge, ipcRenderer } = require('electron')
 
+const path = require('path')
 
+
 
+contextBridge.exposeInMainWorld('electron', {
 
+  startDrag: (fileName) => {
 
+    ipcRenderer.send('ondragstart', path.join(process.cwd(), fileName))
 
+  }
 
+})
 
+```
 
+
 
+### Index.html
 
+
 
+Add a draggable element to `index.html`, and reference your renderer script:
 
 
 ```html
 
-<a href="#" id="drag">Drag me</a>
 
+<div style="border:2px solid black;border-radius:3px;padding:5px;display:inline-block" draggable="true" id="drag">Drag me</div>
 
 <script src="renderer.js"></script>
 
 ```
 
 
-and add the following lines to the `renderer.js` file:
 
+### Renderer.js
 
 
-```javascript
 
-const { ipcRenderer } = require('electron')
 
+In `renderer.js` set up the renderer process to handle drag events by calling the method you added via the [`contextBridge`] above.
 
 
+```javascript
 
 document.getElementById('drag').ondragstart = (event) => {
 
   event.preventDefault()
 
-  ipcRenderer.send('ondragstart', '/absolute/path/to/the/item')
 
+  window.electron.startDrag('drag-and-drop.md')
 
 }
 
 ```
 
 
-The code above instructs the Renderer process to handle the `ondragstart` event
 
-and forward the information to the Main process.
 
+### Main.js
 
 
-In the Main process(`main.js` file), expand the received event with a path to the file that is
 
+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 fiddle='docs/fiddles/features/drag-and-drop'
 
@@ -56,3 +72,5 @@ the item from the BrowserWindow 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)
 
+
 
+[`contextBridge`]: ../api/context-bridge.md