svelte-dnd-action 0.9.16 → 0.9.19

package/README.md

@@ -285,6 +285,35 @@ Then you will be able to use the library with type safety as follows (Typescript
 </section>
 ```
 
+#### Custom types with `DndEvent<T>`
+
+You can use generics to set the type of `items` you are expecting in `DndEvent`. Simply add a type to it like so: `DndEvent<Dog>`. For example:
+
+```html
+<script lang="ts">
+    import {dndzone} from "svelte-dnd-action";
+    import {flip} from "svelte/animate";
+
+    interface Dog {
+        id: number;
+        name: string;
+        breed: string;
+    }
+
+    function handleSort(e: CustomEvent<DndEvent<Dog>>) {
+        //e.detail.items now evaluates to type Dog.
+        items = e.detail.items;
+    }
+
+	let items: Dog[] = [
+		{ id: 1, name: 'Fido', breed: 'bulldog' },
+		{ id: 2, name: 'Spot', breed: 'labrador' },
+		{ id: 3, name: 'Jacky', breed: 'golden retriever' }
+	];
+</script>
+```
+
+
 ### Contributing [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/isaacHagoel/svelte-dnd-action/issues)
 
 There is still quite a lot to do. If you'd like to contribute please get in touch (raise an issue or comment on an existing one).

package/dist/index.d.ts

@@ -70,8 +70,8 @@ export interface DndEventInfo {
     source: SOURCES; // the type of interaction that the user used to perform the dnd operation
 }
 
-export type DndEvent = {
-    items: Item[];
+export type DndEvent<T = Item> = {
+    items: T[];
     info: DndEventInfo;
 };
 

package/dist/index.js

@@ -4,20 +4,40 @@
   (global = global || self, factory(global.DndAction = {}));
 }(this, (function (exports) { 'use strict';
 
-  function _typeof(obj) {
-    "@babel/helpers - typeof";
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
 
-    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-      _typeof = function (obj) {
-        return typeof obj;
-      };
-    } else {
-      _typeof = function (obj) {
-        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-      };
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      enumerableOnly && (symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      })), keys.push.apply(keys, symbols);
+    }
+
+    return keys;
+  }
+
+  function _objectSpread2(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = null != arguments[i] ? arguments[i] : {};
+      i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
     }
 
-    return _typeof(obj);
+    return target;
+  }
+
+  function _typeof(obj) {
+    "@babel/helpers - typeof";
+
+    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+      return typeof obj;
+    } : function (obj) {
+      return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    }, _typeof(obj);
   }
 
   function _defineProperty(obj, key, value) {
@@ -35,40 +55,6 @@
     return obj;
   }
 
-  function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-
-    if (Object.getOwnPropertySymbols) {
-      var symbols = Object.getOwnPropertySymbols(object);
-      if (enumerableOnly) symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-      keys.push.apply(keys, symbols);
-    }
-
-    return keys;
-  }
-
-  function _objectSpread2(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i] != null ? arguments[i] : {};
-
-      if (i % 2) {
-        ownKeys(Object(source), true).forEach(function (key) {
-          _defineProperty(target, key, source[key]);
-        });
-      } else if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-      } else {
-        ownKeys(Object(source)).forEach(function (key) {
-          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-      }
-    }
-
-    return target;
-  }
-
   function _objectWithoutPropertiesLoose(source, excluded) {
     if (source == null) return {};
     var target = {};
@@ -122,18 +108,21 @@
   }
 
   function _iterableToArray(iter) {
-    if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
   }
 
   function _iterableToArrayLimit(arr, i) {
-    if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+
+    if (_i == null) return;
     var _arr = [];
     var _n = true;
     var _d = false;
-    var _e = undefined;
+
+    var _s, _e;
 
     try {
-      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
         _arr.push(_s.value);
 
         if (i && _arr.length === i) break;
@@ -178,9 +167,9 @@
   }
 
   function _createForOfIteratorHelper(o, allowArrayLike) {
-    var it;
+    var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
 
-    if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
+    if (!it) {
       if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
         if (it) o = it;
         var i = 0;
@@ -213,7 +202,7 @@
         err;
     return {
       s: function () {
-        it = o[Symbol.iterator]();
+        it = it.call(o);
       },
       n: function () {
         var step = it.next();
@@ -1054,6 +1043,54 @@
     resetScrolling$1();
   }
 
+  /**
+   * Fixes svelte issue when cloning node containing (or being) <select> which will loose it's value.
+   * Since svelte manages select value internally.
+   * @see https://github.com/sveltejs/svelte/issues/6717
+   * @see https://github.com/isaacHagoel/svelte-dnd-action/issues/306
+   * 
+   * @param {HTMLElement} el 
+   * @returns 
+   */
+  function svelteNodeClone(el) {
+    var cloned = el.cloneNode(true);
+    var values = [];
+    var elIsSelect = el.tagName === "SELECT";
+    var selects = elIsSelect ? [el] : _toConsumableArray(el.querySelectorAll('select'));
+
+    var _iterator = _createForOfIteratorHelper(selects),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var _select = _step.value;
+        values.push(_select.value);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+
+    if (selects.length <= 0) {
+      return cloned;
+    }
+
+    var clonedSelects = elIsSelect ? [cloned] : _toConsumableArray(cloned.querySelectorAll('select'));
+
+    for (var i = 0; i < clonedSelects.length; i++) {
+      var select = clonedSelects[i];
+      var value = values[i];
+      var optionEl = select.querySelector("option[value=\"".concat(value, "\""));
+
+      if (optionEl) {
+        optionEl.setAttribute('selected', true);
+      }
+    }
+
+    return cloned;
+  }
+
   var TRANSITION_DURATION_SECONDS = 0.2;
   /**
    * private helper function - creates a transition string for a property
@@ -1074,7 +1111,7 @@
 
   function createDraggedElementFrom(originalElement, positionCenterOnXY) {
     var rect = originalElement.getBoundingClientRect();
-    var draggedEl = originalElement.cloneNode(true);
+    var draggedEl = svelteNodeClone(originalElement);
     copyStylesFromTo(originalElement, draggedEl);
     draggedEl.id = DRAGGED_ELEMENT_ID;
     draggedEl.style.position = "fixed";
@@ -1187,7 +1224,7 @@
    * @param {HTMLElement} dragTarget
    */
 
-  function hideOriginalDragTarget(dragTarget) {
+  function hideElement(dragTarget) {
     dragTarget.style.display = "none";
     dragTarget.style.position = "fixed";
     dragTarget.style.zIndex = "-5";
@@ -1290,7 +1327,8 @@
   var isWorkingOnPreviousDrag = false;
   var finalizingPreviousDrag = false;
   var unlockOriginDzMinDimensions;
-  var isDraggedOutsideOfAnyDz = false; // a map from type to a set of drop-zones
+  var isDraggedOutsideOfAnyDz = false;
+  var scheduledForRemovalAfterDrop = []; // a map from type to a set of drop-zones
 
   var typeToDropZones = new Map(); // important - this is needed because otherwise the config that would be used for everyone is the config of the element that created the event listeners
 
@@ -1626,12 +1664,37 @@
     draggedEl.style.transform = "translate3d(".concat(newTransform.x, "px, ").concat(newTransform.y, "px, 0)");
     window.setTimeout(callback, dropAnimationDurationMs);
   }
+
+  function scheduleDZForRemovalAfterDrop(dz, destroy) {
+    scheduledForRemovalAfterDrop.push({
+      dz: dz,
+      destroy: destroy
+    });
+    window.requestAnimationFrame(function () {
+      hideElement(dz);
+      document.body.appendChild(dz);
+    });
+  }
   /* cleanup */
 
 
   function cleanupPostDrop() {
     draggedEl.remove();
     originalDragTarget.remove();
+
+    if (scheduledForRemovalAfterDrop.length) {
+      printDebug(function () {
+        return ["will destroy zones that were removed during drag", scheduledForRemovalAfterDrop];
+      });
+      scheduledForRemovalAfterDrop.forEach(function (_ref) {
+        var dz = _ref.dz,
+            destroy = _ref.destroy;
+        destroy();
+        dz.remove();
+      });
+      scheduledForRemovalAfterDrop = [];
+    }
+
     draggedEl = undefined;
     originalDragTarget = undefined;
     draggedElData = undefined;
@@ -1779,7 +1842,7 @@
 
           draggedEl.focus();
           watchDraggedElement();
-          hideOriginalDragTarget(originalDragTarget);
+          hideElement(originalDragTarget);
           originDropZoneRoot.appendChild(originalDragTarget);
         } else {
           window.requestAnimationFrame(keepOriginalElementInDom);
@@ -1818,27 +1881,27 @@
       });
     }
 
-    function configure(_ref) {
-      var _ref$items = _ref.items,
-          items = _ref$items === void 0 ? undefined : _ref$items,
-          _ref$flipDurationMs = _ref.flipDurationMs,
-          dropAnimationDurationMs = _ref$flipDurationMs === void 0 ? 0 : _ref$flipDurationMs,
-          _ref$type = _ref.type,
-          newType = _ref$type === void 0 ? DEFAULT_DROP_ZONE_TYPE : _ref$type,
-          _ref$dragDisabled = _ref.dragDisabled,
-          dragDisabled = _ref$dragDisabled === void 0 ? false : _ref$dragDisabled,
-          _ref$morphDisabled = _ref.morphDisabled,
-          morphDisabled = _ref$morphDisabled === void 0 ? false : _ref$morphDisabled,
-          _ref$dropFromOthersDi = _ref.dropFromOthersDisabled,
-          dropFromOthersDisabled = _ref$dropFromOthersDi === void 0 ? false : _ref$dropFromOthersDi,
-          _ref$dropTargetStyle = _ref.dropTargetStyle,
-          dropTargetStyle = _ref$dropTargetStyle === void 0 ? DEFAULT_DROP_TARGET_STYLE : _ref$dropTargetStyle,
-          _ref$dropTargetClasse = _ref.dropTargetClasses,
-          dropTargetClasses = _ref$dropTargetClasse === void 0 ? [] : _ref$dropTargetClasse,
-          _ref$transformDragged = _ref.transformDraggedElement,
-          transformDraggedElement = _ref$transformDragged === void 0 ? function () {} : _ref$transformDragged,
-          _ref$centreDraggedOnC = _ref.centreDraggedOnCursor,
-          centreDraggedOnCursor = _ref$centreDraggedOnC === void 0 ? false : _ref$centreDraggedOnC;
+    function configure(_ref2) {
+      var _ref2$items = _ref2.items,
+          items = _ref2$items === void 0 ? undefined : _ref2$items,
+          _ref2$flipDurationMs = _ref2.flipDurationMs,
+          dropAnimationDurationMs = _ref2$flipDurationMs === void 0 ? 0 : _ref2$flipDurationMs,
+          _ref2$type = _ref2.type,
+          newType = _ref2$type === void 0 ? DEFAULT_DROP_ZONE_TYPE : _ref2$type,
+          _ref2$dragDisabled = _ref2.dragDisabled,
+          dragDisabled = _ref2$dragDisabled === void 0 ? false : _ref2$dragDisabled,
+          _ref2$morphDisabled = _ref2.morphDisabled,
+          morphDisabled = _ref2$morphDisabled === void 0 ? false : _ref2$morphDisabled,
+          _ref2$dropFromOthersD = _ref2.dropFromOthersDisabled,
+          dropFromOthersDisabled = _ref2$dropFromOthersD === void 0 ? false : _ref2$dropFromOthersD,
+          _ref2$dropTargetStyle = _ref2.dropTargetStyle,
+          dropTargetStyle = _ref2$dropTargetStyle === void 0 ? DEFAULT_DROP_TARGET_STYLE : _ref2$dropTargetStyle,
+          _ref2$dropTargetClass = _ref2.dropTargetClasses,
+          dropTargetClasses = _ref2$dropTargetClass === void 0 ? [] : _ref2$dropTargetClass,
+          _ref2$transformDragge = _ref2.transformDraggedElement,
+          transformDraggedElement = _ref2$transformDragge === void 0 ? function () {} : _ref2$transformDragge,
+          _ref2$centreDraggedOn = _ref2.centreDraggedOnCursor,
+          centreDraggedOnCursor = _ref2$centreDraggedOn === void 0 ? false : _ref2$centreDraggedOn;
       config.dropAnimationDurationMs = dropAnimationDurationMs;
 
       if (config.type && newType !== config.type) {
@@ -1941,11 +2004,22 @@
         configure(newOptions);
       },
       destroy: function destroy() {
-        printDebug(function () {
-          return "pointer dndzone will destroy";
-        });
-        unregisterDropZone(node, config.type);
-        dzToConfig["delete"](node);
+        function destroyDz() {
+          printDebug(function () {
+            return "pointer dndzone will destroy";
+          });
+          unregisterDropZone(node, dzToConfig.get(node).type);
+          dzToConfig["delete"](node);
+        }
+
+        if (isWorkingOnPreviousDrag) {
+          printDebug(function () {
+            return "pointer dndzone will be scheduled for destruction";
+          });
+          scheduleDZForRemovalAfterDrop(node, destroyDz);
+        } else {
+          destroyDz();
+        }
       }
     };
   }
@@ -2527,6 +2601,7 @@
     return handles;
   }
 
+  var _excluded = ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "zoneTabIndex", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor"];
   /**
    * A custom action to turn any container to a dnd zone and all of its direct children to draggables
    * Supports mouse, touch and keyboard interactions.
@@ -2580,7 +2655,7 @@
         transformDraggedElement = options.transformDraggedElement,
         autoAriaDisabled = options.autoAriaDisabled,
         centreDraggedOnCursor = options.centreDraggedOnCursor,
-        rest = _objectWithoutProperties(options, ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "zoneTabIndex", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor"]);
+        rest = _objectWithoutProperties(options, _excluded);
     /*eslint-enable*/
 
 

package/dist/index.mjs

@@ -1,17 +1,37 @@
-function _typeof(obj) {
-  "@babel/helpers - typeof";
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
 
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function (obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function (obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
   }
 
-  return _typeof(obj);
+  return target;
+}
+
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
 }
 
 function _defineProperty(obj, key, value) {
@@ -29,40 +49,6 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
-    keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
-  }
-
-  return target;
-}
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -116,18 +102,21 @@ function _arrayWithHoles(arr) {
 }
 
 function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
 
 function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+
+  if (_i == null) return;
   var _arr = [];
   var _n = true;
   var _d = false;
-  var _e = undefined;
+
+  var _s, _e;
 
   try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
       _arr.push(_s.value);
 
       if (i && _arr.length === i) break;
@@ -172,9 +161,9 @@ function _nonIterableRest() {
 }
 
 function _createForOfIteratorHelper(o, allowArrayLike) {
-  var it;
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
 
-  if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
+  if (!it) {
     if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
       if (it) o = it;
       var i = 0;
@@ -207,7 +196,7 @@ function _createForOfIteratorHelper(o, allowArrayLike) {
       err;
   return {
     s: function () {
-      it = o[Symbol.iterator]();
+      it = it.call(o);
     },
     n: function () {
       var step = it.next();
@@ -1048,6 +1037,54 @@ function disarmWindowScroller() {
   resetScrolling$1();
 }
 
+/**
+ * Fixes svelte issue when cloning node containing (or being) <select> which will loose it's value.
+ * Since svelte manages select value internally.
+ * @see https://github.com/sveltejs/svelte/issues/6717
+ * @see https://github.com/isaacHagoel/svelte-dnd-action/issues/306
+ * 
+ * @param {HTMLElement} el 
+ * @returns 
+ */
+function svelteNodeClone(el) {
+  var cloned = el.cloneNode(true);
+  var values = [];
+  var elIsSelect = el.tagName === "SELECT";
+  var selects = elIsSelect ? [el] : _toConsumableArray(el.querySelectorAll('select'));
+
+  var _iterator = _createForOfIteratorHelper(selects),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _select = _step.value;
+      values.push(_select.value);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+
+  if (selects.length <= 0) {
+    return cloned;
+  }
+
+  var clonedSelects = elIsSelect ? [cloned] : _toConsumableArray(cloned.querySelectorAll('select'));
+
+  for (var i = 0; i < clonedSelects.length; i++) {
+    var select = clonedSelects[i];
+    var value = values[i];
+    var optionEl = select.querySelector("option[value=\"".concat(value, "\""));
+
+    if (optionEl) {
+      optionEl.setAttribute('selected', true);
+    }
+  }
+
+  return cloned;
+}
+
 var TRANSITION_DURATION_SECONDS = 0.2;
 /**
  * private helper function - creates a transition string for a property
@@ -1068,7 +1105,7 @@ function trs(property) {
 
 function createDraggedElementFrom(originalElement, positionCenterOnXY) {
   var rect = originalElement.getBoundingClientRect();
-  var draggedEl = originalElement.cloneNode(true);
+  var draggedEl = svelteNodeClone(originalElement);
   copyStylesFromTo(originalElement, draggedEl);
   draggedEl.id = DRAGGED_ELEMENT_ID;
   draggedEl.style.position = "fixed";
@@ -1181,7 +1218,7 @@ function styleDraggable(draggableEl, dragDisabled) {
  * @param {HTMLElement} dragTarget
  */
 
-function hideOriginalDragTarget(dragTarget) {
+function hideElement(dragTarget) {
   dragTarget.style.display = "none";
   dragTarget.style.position = "fixed";
   dragTarget.style.zIndex = "-5";
@@ -1284,7 +1321,8 @@ var currentMousePosition;
 var isWorkingOnPreviousDrag = false;
 var finalizingPreviousDrag = false;
 var unlockOriginDzMinDimensions;
-var isDraggedOutsideOfAnyDz = false; // a map from type to a set of drop-zones
+var isDraggedOutsideOfAnyDz = false;
+var scheduledForRemovalAfterDrop = []; // a map from type to a set of drop-zones
 
 var typeToDropZones = new Map(); // important - this is needed because otherwise the config that would be used for everyone is the config of the element that created the event listeners
 
@@ -1620,12 +1658,37 @@ function animateDraggedToFinalPosition(shadowElIdx, callback) {
   draggedEl.style.transform = "translate3d(".concat(newTransform.x, "px, ").concat(newTransform.y, "px, 0)");
   window.setTimeout(callback, dropAnimationDurationMs);
 }
+
+function scheduleDZForRemovalAfterDrop(dz, destroy) {
+  scheduledForRemovalAfterDrop.push({
+    dz: dz,
+    destroy: destroy
+  });
+  window.requestAnimationFrame(function () {
+    hideElement(dz);
+    document.body.appendChild(dz);
+  });
+}
 /* cleanup */
 
 
 function cleanupPostDrop() {
   draggedEl.remove();
   originalDragTarget.remove();
+
+  if (scheduledForRemovalAfterDrop.length) {
+    printDebug(function () {
+      return ["will destroy zones that were removed during drag", scheduledForRemovalAfterDrop];
+    });
+    scheduledForRemovalAfterDrop.forEach(function (_ref) {
+      var dz = _ref.dz,
+          destroy = _ref.destroy;
+      destroy();
+      dz.remove();
+    });
+    scheduledForRemovalAfterDrop = [];
+  }
+
   draggedEl = undefined;
   originalDragTarget = undefined;
   draggedElData = undefined;
@@ -1773,7 +1836,7 @@ function dndzone(node, options) {
 
         draggedEl.focus();
         watchDraggedElement();
-        hideOriginalDragTarget(originalDragTarget);
+        hideElement(originalDragTarget);
         originDropZoneRoot.appendChild(originalDragTarget);
       } else {
         window.requestAnimationFrame(keepOriginalElementInDom);
@@ -1812,27 +1875,27 @@ function dndzone(node, options) {
     });
   }
 
-  function configure(_ref) {
-    var _ref$items = _ref.items,
-        items = _ref$items === void 0 ? undefined : _ref$items,
-        _ref$flipDurationMs = _ref.flipDurationMs,
-        dropAnimationDurationMs = _ref$flipDurationMs === void 0 ? 0 : _ref$flipDurationMs,
-        _ref$type = _ref.type,
-        newType = _ref$type === void 0 ? DEFAULT_DROP_ZONE_TYPE : _ref$type,
-        _ref$dragDisabled = _ref.dragDisabled,
-        dragDisabled = _ref$dragDisabled === void 0 ? false : _ref$dragDisabled,
-        _ref$morphDisabled = _ref.morphDisabled,
-        morphDisabled = _ref$morphDisabled === void 0 ? false : _ref$morphDisabled,
-        _ref$dropFromOthersDi = _ref.dropFromOthersDisabled,
-        dropFromOthersDisabled = _ref$dropFromOthersDi === void 0 ? false : _ref$dropFromOthersDi,
-        _ref$dropTargetStyle = _ref.dropTargetStyle,
-        dropTargetStyle = _ref$dropTargetStyle === void 0 ? DEFAULT_DROP_TARGET_STYLE : _ref$dropTargetStyle,
-        _ref$dropTargetClasse = _ref.dropTargetClasses,
-        dropTargetClasses = _ref$dropTargetClasse === void 0 ? [] : _ref$dropTargetClasse,
-        _ref$transformDragged = _ref.transformDraggedElement,
-        transformDraggedElement = _ref$transformDragged === void 0 ? function () {} : _ref$transformDragged,
-        _ref$centreDraggedOnC = _ref.centreDraggedOnCursor,
-        centreDraggedOnCursor = _ref$centreDraggedOnC === void 0 ? false : _ref$centreDraggedOnC;
+  function configure(_ref2) {
+    var _ref2$items = _ref2.items,
+        items = _ref2$items === void 0 ? undefined : _ref2$items,
+        _ref2$flipDurationMs = _ref2.flipDurationMs,
+        dropAnimationDurationMs = _ref2$flipDurationMs === void 0 ? 0 : _ref2$flipDurationMs,
+        _ref2$type = _ref2.type,
+        newType = _ref2$type === void 0 ? DEFAULT_DROP_ZONE_TYPE : _ref2$type,
+        _ref2$dragDisabled = _ref2.dragDisabled,
+        dragDisabled = _ref2$dragDisabled === void 0 ? false : _ref2$dragDisabled,
+        _ref2$morphDisabled = _ref2.morphDisabled,
+        morphDisabled = _ref2$morphDisabled === void 0 ? false : _ref2$morphDisabled,
+        _ref2$dropFromOthersD = _ref2.dropFromOthersDisabled,
+        dropFromOthersDisabled = _ref2$dropFromOthersD === void 0 ? false : _ref2$dropFromOthersD,
+        _ref2$dropTargetStyle = _ref2.dropTargetStyle,
+        dropTargetStyle = _ref2$dropTargetStyle === void 0 ? DEFAULT_DROP_TARGET_STYLE : _ref2$dropTargetStyle,
+        _ref2$dropTargetClass = _ref2.dropTargetClasses,
+        dropTargetClasses = _ref2$dropTargetClass === void 0 ? [] : _ref2$dropTargetClass,
+        _ref2$transformDragge = _ref2.transformDraggedElement,
+        transformDraggedElement = _ref2$transformDragge === void 0 ? function () {} : _ref2$transformDragge,
+        _ref2$centreDraggedOn = _ref2.centreDraggedOnCursor,
+        centreDraggedOnCursor = _ref2$centreDraggedOn === void 0 ? false : _ref2$centreDraggedOn;
     config.dropAnimationDurationMs = dropAnimationDurationMs;
 
     if (config.type && newType !== config.type) {
@@ -1935,11 +1998,22 @@ function dndzone(node, options) {
       configure(newOptions);
     },
     destroy: function destroy() {
-      printDebug(function () {
-        return "pointer dndzone will destroy";
-      });
-      unregisterDropZone(node, config.type);
-      dzToConfig["delete"](node);
+      function destroyDz() {
+        printDebug(function () {
+          return "pointer dndzone will destroy";
+        });
+        unregisterDropZone(node, dzToConfig.get(node).type);
+        dzToConfig["delete"](node);
+      }
+
+      if (isWorkingOnPreviousDrag) {
+        printDebug(function () {
+          return "pointer dndzone will be scheduled for destruction";
+        });
+        scheduleDZForRemovalAfterDrop(node, destroyDz);
+      } else {
+        destroyDz();
+      }
     }
   };
 }
@@ -2521,6 +2595,7 @@ function dndzone$1(node, options) {
   return handles;
 }
 
+var _excluded = ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "zoneTabIndex", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor"];
 /**
  * A custom action to turn any container to a dnd zone and all of its direct children to draggables
  * Supports mouse, touch and keyboard interactions.
@@ -2574,7 +2649,7 @@ function validateOptions(options) {
       transformDraggedElement = options.transformDraggedElement,
       autoAriaDisabled = options.autoAriaDisabled,
       centreDraggedOnCursor = options.centreDraggedOnCursor,
-      rest = _objectWithoutProperties(options, ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "zoneTabIndex", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor"]);
+      rest = _objectWithoutProperties(options, _excluded);
   /*eslint-enable*/
 
 

package/package.json

@@ -40,7 +40,7 @@
         "dist"
     ],
     "description": "*An 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.9.16",
+    "version": "0.9.19",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/isaacHagoel/svelte-dnd-action.git"

package/src/helpers/styler.js

@@ -1,5 +1,6 @@
 import {SHADOW_ELEMENT_ATTRIBUTE_NAME, DRAGGED_ELEMENT_ID} from "../constants";
 import {findCenter} from "./intersection";
+import { svelteNodeClone } from "./svelteNodeClone";
 
 const TRANSITION_DURATION_SECONDS = 0.2;
 
@@ -19,7 +20,7 @@ function trs(property) {
  */
 export function createDraggedElementFrom(originalElement, positionCenterOnXY) {
     const rect = originalElement.getBoundingClientRect();
-    const draggedEl = originalElement.cloneNode(true);
+    const draggedEl = svelteNodeClone(originalElement);
     copyStylesFromTo(originalElement, draggedEl);
     draggedEl.id = DRAGGED_ELEMENT_ID;
     draggedEl.style.position = "fixed";
@@ -135,7 +136,7 @@ export function styleDraggable(draggableEl, dragDisabled) {
  * Hides the provided element so that it can stay in the dom without interrupting
  * @param {HTMLElement} dragTarget
  */
-export function hideOriginalDragTarget(dragTarget) {
+export function hideElement(dragTarget) {
     dragTarget.style.display = "none";
     dragTarget.style.position = "fixed";
     dragTarget.style.zIndex = "-5";

package/src/helpers/svelteNodeClone.js

@@ -0,0 +1,35 @@
+/**
+ * Fixes svelte issue when cloning node containing (or being) <select> which will loose it's value.
+ * Since svelte manages select value internally.
+ * @see https://github.com/sveltejs/svelte/issues/6717
+ * @see https://github.com/isaacHagoel/svelte-dnd-action/issues/306
+ * 
+ * @param {HTMLElement} el 
+ * @returns 
+ */
+export function svelteNodeClone(el) {
+  const cloned = el.cloneNode(true);
+
+  const values = [];
+  const elIsSelect = el.tagName === "SELECT";
+  const selects = elIsSelect ? [el] : [...el.querySelectorAll('select')];
+  for (const select of selects) {
+    values.push(select.value);
+  }
+
+  if (selects.length <= 0) {
+    return cloned;
+  }
+
+  const clonedSelects = elIsSelect ? [cloned] : [...cloned.querySelectorAll('select')];
+  for (let i = 0; i < clonedSelects.length; i++) {
+    const select = clonedSelects[i];
+    const value = values[i];
+    const optionEl = select.querySelector(`option[value="${value}"`);
+    if (optionEl) {
+      optionEl.setAttribute('selected', true);
+    }
+  }
+
+  return cloned;
+}

package/src/pointerAction.js

@@ -13,7 +13,7 @@ import {armWindowScroller, disarmWindowScroller} from "./helpers/windowScroller"
 import {
     createDraggedElementFrom,
     decorateShadowEl,
-    hideOriginalDragTarget,
+    hideElement,
     morphDraggedElementToBeLike,
     moveDraggedElementToWasDroppedState,
     preventShrinking,
@@ -55,6 +55,7 @@ let isWorkingOnPreviousDrag = false;
 let finalizingPreviousDrag = false;
 let unlockOriginDzMinDimensions;
 let isDraggedOutsideOfAnyDz = false;
+let scheduledForRemovalAfterDrop = [];
 
 // a map from type to a set of drop-zones
 const typeToDropZones = new Map();
@@ -280,10 +281,25 @@ function animateDraggedToFinalPosition(shadowElIdx, callback) {
     window.setTimeout(callback, dropAnimationDurationMs);
 }
 
+function scheduleDZForRemovalAfterDrop(dz, destroy) {
+    scheduledForRemovalAfterDrop.push({dz, destroy});
+    window.requestAnimationFrame(() => {
+        hideElement(dz);
+        document.body.appendChild(dz);
+    });
+}
 /* cleanup */
 function cleanupPostDrop() {
     draggedEl.remove();
     originalDragTarget.remove();
+    if (scheduledForRemovalAfterDrop.length) {
+        printDebug(() => ["will destroy zones that were removed during drag", scheduledForRemovalAfterDrop]);
+        scheduledForRemovalAfterDrop.forEach(({dz, destroy}) => {
+            destroy();
+            dz.remove();
+        })
+        scheduledForRemovalAfterDrop = [];
+    }
     draggedEl = undefined;
     originalDragTarget = undefined;
     draggedElData = undefined;
@@ -398,7 +414,7 @@ export function dndzone(node, options) {
                 // to prevent the outline from disappearing
                 draggedEl.focus();
                 watchDraggedElement();
-                hideOriginalDragTarget(originalDragTarget);
+                hideElement(originalDragTarget);
                 originDropZoneRoot.appendChild(originalDragTarget);
             } else {
                 window.requestAnimationFrame(keepOriginalElementInDom);
@@ -529,9 +545,17 @@ export function dndzone(node, options) {
             configure(newOptions);
         },
         destroy: () => {
-            printDebug(() => "pointer dndzone will destroy");
-            unregisterDropZone(node, config.type);
-            dzToConfig.delete(node);
+            function destroyDz() {
+                printDebug(() => "pointer dndzone will destroy");
+                unregisterDropZone(node, dzToConfig.get(node).type);
+                dzToConfig.delete(node);
+            }
+            if (isWorkingOnPreviousDrag) {
+                printDebug(() => "pointer dndzone will be scheduled for destruction");
+                scheduleDZForRemovalAfterDrop(node, destroyDz);
+            } else {
+               destroyDz();
+            }
         }
     };
 }