|
@@ -295,6 +295,13 @@
|
|
|
|
|
|
const dropZone = document.querySelector('body');
|
|
const dropZone = document.querySelector('body');
|
|
|
|
|
|
|
|
+ const handleKeyDown = (event: KeyboardEvent) => {
|
|
|
|
+ if (event.key === 'Escape') {
|
|
|
|
+ console.log('Escape');
|
|
|
|
+ dragged = false;
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+
|
|
const onDragOver = (e) => {
|
|
const onDragOver = (e) => {
|
|
e.preventDefault();
|
|
e.preventDefault();
|
|
dragged = true;
|
|
dragged = true;
|
|
@@ -350,11 +357,15 @@
|
|
dragged = false;
|
|
dragged = false;
|
|
};
|
|
};
|
|
|
|
|
|
|
|
+ window.addEventListener('keydown', handleKeyDown);
|
|
|
|
+
|
|
dropZone?.addEventListener('dragover', onDragOver);
|
|
dropZone?.addEventListener('dragover', onDragOver);
|
|
dropZone?.addEventListener('drop', onDrop);
|
|
dropZone?.addEventListener('drop', onDrop);
|
|
dropZone?.addEventListener('dragleave', onDragLeave);
|
|
dropZone?.addEventListener('dragleave', onDragLeave);
|
|
|
|
|
|
return () => {
|
|
return () => {
|
|
|
|
+ window.removeEventListener('keydown', handleKeyDown);
|
|
|
|
+
|
|
dropZone?.removeEventListener('dragover', onDragOver);
|
|
dropZone?.removeEventListener('dragover', onDragOver);
|
|
dropZone?.removeEventListener('drop', onDrop);
|
|
dropZone?.removeEventListener('drop', onDrop);
|
|
dropZone?.removeEventListener('dragleave', onDragLeave);
|
|
dropZone?.removeEventListener('dragleave', onDragLeave);
|