svelte-dnd-action - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

dist/index.js

@@ -429,2 +429,4 @@ (function (global, factory) {
         const draggedEl = originalElement.cloneNode(true);
+        draggedEl.id = `svelte-dnd-action-dragged-el`;
+        draggedEl.name = `svelte-dnd-action-dragged-el`;
         draggedEl.style.position = "fixed";
@@ -500,2 +502,12 @@ draggedEl.style.top = `${rect.top}px`;
     /**
+     * Hides the provided element so that it can stay in the dom without interrupting
+     * @param {HTMLElement} dragTarget
+     */
+    function hideOriginalDragTarget(dragTarget) {
+        dragTarget.style.display = 'none';
+        dragTarget.style.position = 'fixed';
+        dragTarget.style.zIndex = '-5';
+    }
+
+    /**
      * styles the shadow element
@@ -532,2 +544,3 @@ * @param {HTMLElement} shadowEl
 
+    let originalDragTarget;
     let draggedEl;
@@ -569,2 +582,3 @@ let draggedElData;
     function watchDraggedElement() {
+        console.debug('watching dragged element');
         armWindowScroller();
@@ -583,2 +597,3 @@ const dropZones = typeToDropZones.get(draggedElType);
     function unWatchDraggedElement() {
+        console.debug('unwatching dragged element');
         disarmWindowScroller();
@@ -708,3 +723,5 @@ const dropZones = typeToDropZones.get(draggedElType);
         draggedEl.remove();
+        originalDragTarget.remove();
         draggedEl = undefined;
+        originalDragTarget = undefined;
         draggedElData = undefined;
@@ -737,4 +754,2 @@ draggedElType = undefined;
         let elToIdx = new Map();
-        // used before the actual drag starts
-        let potentialDragTarget;
 
@@ -755,3 +770,3 @@ function addMaybeListeners() {
             removeMaybeListeners();
-            potentialDragTarget = undefined;
+            originalDragTarget = undefined;
             dragStartMousePosition = undefined;
@@ -767,4 +782,3 @@ currentMousePosition = undefined;
                 removeMaybeListeners();
-                handleDragStart(potentialDragTarget);
-                potentialDragTarget = undefined;
+                handleDragStart();
             }
@@ -776,8 +790,8 @@ }
             currentMousePosition = {...dragStartMousePosition};
-            potentialDragTarget = e.currentTarget;
+            originalDragTarget = e.currentTarget;
             addMaybeListeners();
         }
 
-        function handleDragStart(dragTarget) {
-            console.debug('drag start', dragTarget, {config});
+        function handleDragStart() {
+            console.debug('drag start', originalDragTarget, {config});
             if (isWorkingOnPreviousDrag) {
@@ -790,5 +804,5 @@ console.debug('cannot start a new drag before finalizing previous one');
             // initialising globals
-            const currentIdx = elToIdx.get(dragTarget);
+            const currentIdx = elToIdx.get(originalDragTarget);
             originIndex = currentIdx;
-            originDropZone = dragTarget.parentNode;
+            originDropZone = originalDragTarget.parentElement;
             const {items, type} = config;
@@ -800,4 +814,11 @@ draggedElData = {...items[currentIdx]};
             // creating the draggable element
-            draggedEl = createDraggedElementFrom(dragTarget);
-            document.body.appendChild(draggedEl);
+            draggedEl = createDraggedElementFrom(originalDragTarget);
+            // We will keep the original dom node in the dom because touch events keep firing on it, we want to re-add it after Svelte removes it
+            window.setTimeout(() => {
+                document.body.appendChild(draggedEl);
+                watchDraggedElement();
+                hideOriginalDragTarget(originalDragTarget);
+                document.body.appendChild(originalDragTarget);
+            }, 0);
+
             styleActiveDropZones(
@@ -809,3 +830,3 @@ Array.from(typeToDropZones.get(config.type))
             // removing the original element by removing its data entry
-            items.splice( currentIdx, 1);
+            items.splice(currentIdx, 1);
             dispatchConsiderEvent(originDropZone, items);
@@ -818,3 +839,2 @@
             window.addEventListener('touchend', handleDrop, {passive: false});
-            watchDraggedElement();
         }
@@ -821,0 +841,0 @@

package.json

@@ -33,3 +33,3 @@ {
   "description": "*Awesome drag and drop library for Svelte 3 (not using the browser's built in dnd, thanks god): Rich animations, nested containers, touch support and more *",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "dependencies": {
@@ -36,0 +36,0 @@ "acorn": "^7.1.1",

src/action.js

@@ -10,3 +10,4 @@ import { observe, unobserve } from './helpers/observer';
     styleActiveDropZones,
-    styleInActiveDropZones
+    styleInActiveDropZones,
+    hideOriginalDragTarget
 } from "./helpers/styler";
@@ -18,2 +19,3 @@ import { DRAGGED_ENTERED_EVENT_NAME, DRAGGED_LEFT_EVENT_NAME, DRAGGED_LEFT_DOCUMENT_EVENT_NAME, DRAGGED_OVER_INDEX_EVENT_NAME, dispatchConsiderEvent, dispatchFinalizeEvent } from './helpers/dispatcher';
 
+let originalDragTarget;
 let draggedEl;
@@ -55,2 +57,3 @@ let draggedElData;
 function watchDraggedElement() {
+    console.debug('watching dragged element');
     armWindowScroller();
@@ -69,2 +72,3 @@ const dropZones = typeToDropZones.get(draggedElType);
 function unWatchDraggedElement() {
+    console.debug('unwatching dragged element');
     disarmWindowScroller();
@@ -194,3 +198,5 @@ const dropZones = typeToDropZones.get(draggedElType);
     draggedEl.remove();
+    originalDragTarget.remove();
     draggedEl = undefined;
+    originalDragTarget = undefined;
     draggedElData = undefined;
@@ -223,4 +229,2 @@ draggedElType = undefined;
     let elToIdx = new Map();
-    // used before the actual drag starts
-    let potentialDragTarget;
 
@@ -241,3 +245,3 @@ function addMaybeListeners() {
         removeMaybeListeners();
-        potentialDragTarget = undefined;
+        originalDragTarget = undefined;
         dragStartMousePosition = undefined;
@@ -253,4 +257,3 @@ currentMousePosition = undefined;
             removeMaybeListeners();
-            handleDragStart(potentialDragTarget);
-            potentialDragTarget = undefined;
+            handleDragStart(originalDragTarget);
         }
@@ -262,8 +265,8 @@ }
         currentMousePosition = {...dragStartMousePosition};
-        potentialDragTarget = e.currentTarget;
+        originalDragTarget = e.currentTarget;
         addMaybeListeners();
     }
 
-    function handleDragStart(dragTarget) {
-        console.debug('drag start', dragTarget, {config});
+    function handleDragStart() {
+        console.debug('drag start', originalDragTarget, {config});
         if (isWorkingOnPreviousDrag) {
@@ -276,5 +279,5 @@ console.debug('cannot start a new drag before finalizing previous one');
         // initialising globals
-        const currentIdx = elToIdx.get(dragTarget);
+        const currentIdx = elToIdx.get(originalDragTarget);
         originIndex = currentIdx;
-        originDropZone = dragTarget.parentNode;
+        originDropZone = originalDragTarget.parentElement;
         const {items, type} = config;
@@ -286,4 +289,11 @@ draggedElData = {...items[currentIdx]};
         // creating the draggable element
-        draggedEl = createDraggedElementFrom(dragTarget);
-        document.body.appendChild(draggedEl);
+        draggedEl = createDraggedElementFrom(originalDragTarget);
+        // We will keep the original dom node in the dom because touch events keep firing on it, we want to re-add it after Svelte removes it
+        window.setTimeout(() => {
+            document.body.appendChild(draggedEl);
+            watchDraggedElement();
+            hideOriginalDragTarget(originalDragTarget);
+            document.body.appendChild(originalDragTarget);
+        }, 0);
+
         styleActiveDropZones(
@@ -295,3 +305,3 @@ Array.from(typeToDropZones.get(config.type))
         // removing the original element by removing its data entry
-        items.splice( currentIdx, 1);
+        items.splice(currentIdx, 1);
         dispatchConsiderEvent(originDropZone, items);
@@ -304,3 +314,2 @@
         window.addEventListener('touchend', handleDrop, {passive: false});
-        watchDraggedElement();
     }
@@ -307,0 +316,0 @@

src/helpers/styler.js

@@ -19,2 +19,4 @@ const TRANSITION_DURATION_SECONDS = 0.2;
     const draggedEl = originalElement.cloneNode(true);
+    draggedEl.id = `svelte-dnd-action-dragged-el`;
+    draggedEl.name = `svelte-dnd-action-dragged-el`;
     draggedEl.style.position = "fixed";
@@ -90,2 +92,12 @@ draggedEl.style.top = `${rect.top}px`;
 /**
+ * Hides the provided element so that it can stay in the dom without interrupting
+ * @param {HTMLElement} dragTarget
+ */
+export function hideOriginalDragTarget(dragTarget) {
+    dragTarget.style.display = 'none';
+    dragTarget.style.position = 'fixed';
+    dragTarget.style.zIndex = '-5';
+}
+
+/**
  * styles the shadow element
@@ -92,0 +104,0 @@ * @param {HTMLElement} shadowEl

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

117044

increased by2.16%

Lines of code

2474

increased by2.27%

No dependency changes