Fix drag and drop bug #120

Author: jahn96

src/CodeSnippetDisplay.tsx

@@ -106,7 +106,7 @@ const CODE_SNIPPET_CREATE_NEW_BTN = 'jp-createSnippetBtn';
 /**
  * The threshold in pixels to start a drag event.
  */
-const DRAG_THRESHOLD = 5;
+const DRAG_THRESHOLD = 3;
 
 /**
  * A class used to indicate a snippet item.
@@ -354,6 +354,9 @@ export class CodeSnippetDisplay extends React.Component<
     target.addEventListener('mouseup', this._evtMouseUp, true);
     target.addEventListener('mousemove', this.handleDragMove, true);
 
+    // since a browser has its own drag'n'drop support for images and some other elements.
+    target.ondragstart = () => false;
+
     event.preventDefault();
   }
 
@@ -369,6 +372,9 @@ export class CodeSnippetDisplay extends React.Component<
   }
 
   private handleDragMove(event: MouseEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+
     const data = this._dragData;
 
     if (
@@ -383,7 +389,12 @@ export class CodeSnippetDisplay extends React.Component<
       const idx = (event.target as HTMLElement).id;
       const codeSnippet = this.state.codeSnippets[parseInt(idx)];
 
-      this.startDrag(data.dragImage, codeSnippet, event.clientX, event.clientY);
+      void this.startDrag(
+        data.dragImage,
+        codeSnippet,
+        event.clientX,
+        event.clientY
+      );
     }
   }
 
@@ -404,7 +415,7 @@ export class CodeSnippetDisplay extends React.Component<
   ): boolean {
     const dx = Math.abs(nextX - prevX);
     const dy = Math.abs(nextY - prevY);
-    return dx >= DRAG_THRESHOLD || dy >= DRAG_THRESHOLD;
+    return dx >= 0 || dy >= DRAG_THRESHOLD;
   }
 
   private async startDrag(

src/CodeSnippetWidget.tsx

@@ -67,6 +67,7 @@ export class CodeSnippetWidget extends ReactWidget {
     this.openCodeSnippetEditor.bind(this);
     this.updateCodeSnippets.bind(this);
     this.codeSnippetManager = CodeSnippetContentsService.getInstance();
+    this.node.setAttribute('data-lm-dragscroll', 'true');
   }
 
   get codeSnippetWidgetModel(): CodeSnippetWidgetModel {

style/index.css

@@ -42,6 +42,7 @@
   text-overflow: ellipsis;
   color: var(--jp-ui-font-color0);
   display: flex;
+  align-items: center;
 }
 
 .jp-codeSnippetsContainer-button {
@@ -69,6 +70,15 @@
   background-color: var(--jp-layout-color2);
 }
 
+#jp-codeSnippet-rename {
+  background-color: var(--jp-layout-color2);
+  border: 1px solid var(--jp-layout-color1);
+  border-radius: 4px;
+  font-size: var(--jp-ui-font-size1);
+  box-sizing: border-box;
+  margin: 0px;
+}
+
 .jp-codeSnippet-metadata {
   flex-basis: 95%;
   width: 100%;