Last active
September 9, 2024 19:29
-
-
Save trulysinclair/df1f88f4d77384719980abdb67182630 to your computer and use it in GitHub Desktop.
Super simple drag and drop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Hello World!</title> | |
| <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <h1>Hello World!</h1> | |
| <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="width: 500px; height: 500px;border: 2px solid black;" id="drop1">Drop</div> | |
| <script src="renderer.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const { app, BrowserWindow, ipcMain } = require('electron/main') | |
| const path = require('node:path') | |
| const fs = require('node:fs') | |
| const https = require('node:https') | |
| let win | |
| function createWindow() { | |
| win = new BrowserWindow({ | |
| width: 1920, | |
| height: 1080, | |
| webPreferences: { | |
| preload: path.join(__dirname, 'preload.js') | |
| } | |
| }) | |
| win.loadFile('index.html') | |
| win.webContents.openDevTools() | |
| } | |
| 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') | |
| https.get('https://img.icons8.com/ios/452/drag-and-drop.png', (response) => { | |
| response.pipe(icon) | |
| }) | |
| app.whenReady().then(createWindow) | |
| ipcMain.on('ondragend', (event, e) => { | |
| console.log(e) | |
| const newWin = new BrowserWindow({ | |
| width: 500, | |
| height: 500, | |
| x: e.screenX, | |
| y: e.screenY | |
| }) | |
| newWin.loadFile('index.html') | |
| }) | |
| app.on('window-all-closed', () => { | |
| if (process.platform !== 'darwin') { | |
| app.quit() | |
| } | |
| }) | |
| app.on('activate', () => { | |
| if (BrowserWindow.getAllWindows().length === 0) { | |
| createWindow() | |
| } | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "chemical-brass-relate-6u6gf", | |
| "productName": "chemical-brass-relate-6u6gf", | |
| "description": "My Electron application description", | |
| "keywords": [], | |
| "main": "./main.js", | |
| "version": "1.0.0", | |
| "author": "trulysinclair", | |
| "scripts": { | |
| "start": "electron ." | |
| }, | |
| "dependencies": {}, | |
| "devDependencies": { | |
| "electron": "32.0.1" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const { contextBridge, ipcRenderer } = require('electron/renderer') | |
| contextBridge.exposeInMainWorld('electron', { | |
| endDrag: (e) => ipcRenderer.send('ondragend', e) | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let isSameWindow = false; | |
| const drag1 = document.getElementById('drag1') | |
| const drop1 = document.getElementById('drop1') | |
| drag1.ondragstart = (event) => { | |
| console.group('dragstart') | |
| console.log(event) | |
| console.groupEnd() | |
| } | |
| drop1.ondragover = (e) => { | |
| e.preventDefault() | |
| drop1.classList.add('dropping-el') | |
| } | |
| drop1.ondragleave = (e) => { | |
| drop1.classList.remove('dropping-el') | |
| } | |
| drop1.ondrop = e => { | |
| drop1.classList.remove('dropping-el') | |
| } | |
| document.addEventListener('dragend', (event) => { | |
| event.preventDefault() | |
| console.group('dragend') | |
| console.log(event) | |
| console.groupEnd() | |
| if (!isSameWindow) { | |
| window.electron.endDrag({ | |
| clientX: event.clientX, | |
| clientY: event.clientY, | |
| screenX: event.screenX, | |
| screenY: event.screenY, | |
| dataTransfer: event.dataTransfer.getData('text') | |
| }) | |
| } | |
| document.body.classList.remove('dropping-body') | |
| }) | |
| document.addEventListener('dragover', event => { | |
| // prevent default to allow drop | |
| event.preventDefault() | |
| document.body.classList.add('dropping-body') | |
| isSameWindow = true | |
| }) | |
| document.addEventListener('drop', (e) => { | |
| // prevent default action (open as link for some elements) | |
| e.preventDefault() | |
| console.log('drop!') | |
| document.body.classList.remove('dropping-body') | |
| }) | |
| document.addEventListener('dragleave', () => { | |
| document.body.classList.remove('dropping-body') | |
| isSameWindow = false | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Empty */ | |
| .dropping-body { | |
| background-color: red; | |
| } | |
| #drop1 { | |
| background-color: white | |
| } | |
| .dropping-el { | |
| background-color: indigo !important; | |
| } | |
| body { | |
| background-color: green; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment