Allow changing notebook by drag and dropping notes

ElectronClient/app/gui/NoteList.jsx

@@ -83,13 +83,14 @@ class NoteListComponent extends React.Component {
 
 	itemRenderer(item, theme, width) {
 		const onTitleClick = async (event, item) => {
-			event.preventDefault();
 			if (event.ctrlKey) {
+				event.preventDefault();
 				this.props.dispatch({
 					type: 'NOTE_SELECT_TOGGLE',
 					id: item.id,
 				});
 			} else if (event.shiftKey) {
+				event.preventDefault();
 				this.props.dispatch({
 					type: 'NOTE_SELECT_EXTEND',
 					id: item.id,
@@ -102,6 +103,15 @@ class NoteListComponent extends React.Component {
 			}
 		}
 
+		const onDragStart = (event) => {
+			const noteIds = this.props.selectedNoteIds;
+			if (!noteIds.length) return;
+			
+			event.dataTransfer.setDragImage(new Image(), 1, 1);
+			event.dataTransfer.clearData();
+			event.dataTransfer.setData('text/x-jop-note-ids', JSON.stringify(noteIds));
+		}
+
 		const onCheckboxClick = async (event) => {
 			const checked = event.target.checked;
 			const newNote = {
@@ -136,8 +146,10 @@ class NoteListComponent extends React.Component {
 				className="list-item"
 				onContextMenu={(event) => this.itemContextMenu(event)}
 				href="#"
+				draggable={true}
 				style={listItemTitleStyle}
 				onClick={(event) => { onTitleClick(event, item) }}
+				onDragStart={(event) => onDragStart(event) }
 			>
 			{item.title}
 			</a>

ElectronClient/app/gui/SideBar.jsx

@@ -4,6 +4,7 @@ const shared = require('lib/components/shared/side-menu-shared.js');
 const { Synchronizer } = require('lib/synchronizer.js');
 const { BaseModel } = require('lib/base-model.js');
 const { Folder } = require('lib/models/folder.js');
+const { Note } = require('lib/models/note.js');
 const { Tag } = require('lib/models/tag.js');
 const { _ } = require('lib/locale.js');
 const { themeStyle } = require('../theme.js');
@@ -164,7 +165,32 @@ class SideBarComponent extends React.Component {
 		let style = Object.assign({}, this.style().listItem);
 		if (selected) style = Object.assign(style, this.style().listItemSelected);
 		if (folder.id === Folder.conflictFolderId()) style = Object.assign(style, this.style().conflictFolder);
-		return <a className="list-item" href="#" data-id={folder.id} data-type={BaseModel.TYPE_FOLDER} onContextMenu={(event) => this.itemContextMenu(event)} key={folder.id} style={style} onClick={() => {this.folderItem_click(folder)}}>{folder.title}</a>
+
+		const onDragOver = (event, folder) => {
+			if (event.dataTransfer.types.indexOf('text/x-jop-note-ids') >= 0) event.preventDefault();
+		}
+
+		const onDrop = async (event, folder) => {
+			if (event.dataTransfer.types.indexOf('text/x-jop-note-ids') < 0) return;
+			event.preventDefault();
+
+			const noteIds = JSON.parse(event.dataTransfer.getData('text/x-jop-note-ids'));
+			for (let i = 0; i < noteIds.length; i++) {
+				await Note.moveToFolder(noteIds[i], folder.id);
+			}
+		}
+
+		return <a
+			className="list-item"
+			onDragOver={(event) => { onDragOver(event, folder) } }
+			onDrop={(event) => { onDrop(event, folder) } }
+			href="#"
+			data-id={folder.id}
+			data-type={BaseModel.TYPE_FOLDER}
+			onContextMenu={(event) => this.itemContextMenu(event)}
+			key={folder.id}
+			style={style} onClick={() => {this.folderItem_click(folder)}}>{folder.title}
+		</a>
 	}
 
 	tagItem(tag, selected) {

ElectronClient/app/gui/note-viewer/index.html

@@ -12,7 +12,7 @@ body {
 </style>
 
 <div id="hlScriptContainer"></div>
-<div id="content"></div>
+<div id="content" ondragstart="return false;" ondrop="return false;"></div>
 
 <script>
 const { ipcRenderer } = require('electron');
@@ -71,8 +71,6 @@ function applyHljs(codeElements) {
 // / Handle dynamically loading HLJS when a code element is present
 // ----------------------------------------------------------------------
 
-
-
 ipcRenderer.on('setHtml', (event, html) => {
 	contentElement.innerHTML = html;
 

ElectronClient/app/main-html.js

@@ -33,8 +33,9 @@ Setting.setConstant('appType', 'desktop');
 
 // Disable drag and drop of links inside application (which would
 // open it as if the whole app was a browser)
-document.addEventListener('dragover', event => event.preventDefault());
-document.addEventListener('drop', event => event.preventDefault());
+// document.addEventListener('dragover', event => event.preventDefault());
+// document.addEventListener('drop', event => event.preventDefault());
+
 // Disable middle-click (which would open a new browser window, but we don't want this)
 document.addEventListener('auxclick', event => event.preventDefault());