@get-set/gs-sortable 0.0.18 → 0.0.20

package/dist/actions/calculateOnSort.js

@@ -3,152 +3,15 @@ import { getOffsetFromWindow, getTranslateCoord } from "./general";
 
 const calculateOnSort = (ref) => {
   const params = ref.currentParams;
-  const $items = [...ref.grid.children];
-  const itemsCount = $items.filter(
-    (x) => !x.classList.contains("gs-sortable-item-inmove")
-  ).length;
-  const info = window.GSSortableConfigue.draggableInfo;
-  let {
-    containerPT,
-    containerPR,
-    containerPB,
-    containerPL,
-    containerWidth,
-    currentHeight,
-    currentWidth,
-    itemWidth,
-    gapX,
-    gapY,
-  } = ref.uiData;
-
-  let currentLeft = containerPL;
-  let currentTop = containerPT;
-  let maxHeight = 0;
-  let maxWidth = 0;
-
-  let placeholderSeted = info === undefined;
-  let inProcessEl = undefined;
-  const containerCoord = getOffsetFromWindow(info.ref.grid);
-  if (info !== undefined) {
-    const $el = info.$el;
-    const elCoord = getOffsetFromWindow($el);
-    //const coord = getTranslateCoord($el);
-    inProcessEl = {
-      height: $el.offsetHeight,
-      width: $el.offsetWidth,
-      top: elCoord.top - containerCoord.top,
-      left: elCoord.left - containerCoord.left,
-    };
-  }
-  let plIndex = info.index;
-  let colHeight = 0;
-
-  let itIndex = 0;
-
-  $items.map((el) => {
-    if (!el.classList.contains("gs-sortable-item-inmove")) {
-      const height = el.offsetHeight;
-      const width = el.offsetWidth;
-      if (params.type == types.column) {
-        if (!placeholderSeted) {
-          let placeholderTop =
-            currentTop == containerPT ? containerPT : currentTop + gapY;
-          let placeholderLeft = containerPL;
-
-          if (
-            Math.abs(placeholderTop - inProcessEl.top) <
-              inProcessEl.height / 2 &&
-            Math.abs(placeholderLeft - inProcessEl.left) < inProcessEl.width / 2
-          ) {
-            info.newTop = placeholderTop;
-            info.newLeft = placeholderLeft;
-            placeholderSeted = true;
-            plIndex = itIndex;
-          }
-        }
-        if (!el.classList.contains("gs-sortable-placeholder")) {
-          if (currentTop == containerPT) {
-            currentTop = containerPT + height;
-            currentHeight = currentHeight + height;
-          } else {
-            currentTop = currentTop + gapY + height;
-            currentHeight = currentHeight + height + gapY;
-          }
-        }
-      } else if (params.type == types.row) {
-        if (!placeholderSeted) {
-          let placeholderLeft =
-            currentLeft == containerPL ? containerPL : currentLeft + gapX;
-          let placeholderTop = containerPT;
-          if (
-            Math.abs(placeholderTop - inProcessEl.top) <
-              inProcessEl.height / 2 &&
-            Math.abs(placeholderLeft - inProcessEl.left) < inProcessEl.width / 2
-          ) {
-            info.newTop = placeholderTop;
-            info.newLeft = placeholderLeft;
-            placeholderSeted = true;
-            plIndex = itIndex;
-          }
-        }
-        if (!el.classList.contains("gs-sortable-placeholder")) {
-          if (currentLeft == containerPL) {
-            currentLeft = containerPL + width;
-            currentWidth = currentWidth + width;
-          } else {
-            currentLeft = currentLeft + gapX + width;
-            currentWidth = currentWidth + width + gapX;
-          }
-          if (height > maxHeight) {
-            maxHeight = height;
-          }
-        }
-      } else if (params.type == types.grid) {
-        const placeholderLeft =
-          itIndex % params.count == 0
-            ? containerPL
-            : containerPL + (itIndex % params.count) * (itemWidth + gapX);
-        const placeholderTop = currentTop;
-        if (
-          Math.abs(placeholderTop - inProcessEl.top) < inProcessEl.height / 2 &&
-          Math.abs(placeholderLeft - inProcessEl.left) < inProcessEl.width / 2
-        ) {
-          info.newTop = placeholderTop;
-          info.newLeft = placeholderLeft;
-          placeholderSeted = true;
-          plIndex = itIndex;
-        }
-        if (!el.classList.contains("gs-sortable-placeholder")) {
-          const top = currentTop;
-          if (height > colHeight) {
-            colHeight = height;
-          }
-          if (
-            itIndex % params.count === params.count - 1 ||
-            itIndex === itemsCount - 1
-          ) {
-            if (top === containerPT) {
-              currentHeight = currentHeight + colHeight;
-            } else {
-              currentHeight = currentHeight + colHeight + gapY;
-            }
-            currentTop = currentTop + colHeight + gapY;
-            colHeight = 0;
-          }
-        }
-      }
-      itIndex += 1;
-    }
-  });
-  //'if (plIndex != info.index) {
-  if (true) {
-    info.index = plIndex;
+  if (!params.takeClone) {
+    const $items = [...ref.grid.children];
+    const itemsCount = $items.filter(
+      (x) => !x.classList.contains("gs-sortable-item-inmove")
+    ).length;
+    const info = window.GSSortableConfigue.draggableInfo;
     let {
       containerPT,
-      containerPR,
-      containerPB,
       containerPL,
-      containerWidth,
       currentHeight,
       currentWidth,
       itemWidth,
@@ -156,102 +19,105 @@ const calculateOnSort = (ref) => {
       gapY,
     } = ref.uiData;
 
-    currentLeft = containerPL;
-    currentTop = containerPT;
-    itIndex = 0;
+    let currentLeft = containerPL;
+    let currentTop = containerPT;
+    let maxHeight = 0;
+
+    let placeholderSeted = info === undefined;
+    let inProcessEl = undefined;
+    const containerCoord = getOffsetFromWindow(info.ref.grid);
+    if (info !== undefined) {
+      const $el = info.$el;
+      const elCoord = getOffsetFromWindow($el);
+      inProcessEl = {
+        height: $el.offsetHeight,
+        width: $el.offsetWidth,
+        top: elCoord.top - containerCoord.top,
+        left: elCoord.left - containerCoord.left,
+      };
+    }
+    let plIndex = info.index;
+    let colHeight = 0;
+
+    let itIndex = 0;
+
     $items.map((el) => {
       if (!el.classList.contains("gs-sortable-item-inmove")) {
         const height = el.offsetHeight;
         const width = el.offsetWidth;
         if (params.type == types.column) {
-          if (itIndex == plIndex) {
-            info.placeholder.style.left = `${containerPL}px`;
-            info.newLeft = containerPL;
-            if (currentTop == containerPT) {
-              info.newTop = containerPT;
-              info.placeholder.style.top = `${containerPT}px`;
-              currentTop = containerPT + inProcessEl.height;
-            } else {
-              info.newTop = currentTop + gapY;
-              info.placeholder.style.top = `${currentTop + gapY}px`;
-              currentTop = currentTop + gapY + inProcessEl.height;
+          if (!placeholderSeted) {
+            let placeholderTop =
+              currentTop == containerPT ? containerPT : currentTop + gapY;
+            let placeholderLeft = containerPL;
+
+            if (
+              Math.abs(placeholderTop - inProcessEl.top) <
+                inProcessEl.height / 2 &&
+              Math.abs(placeholderLeft - inProcessEl.left) <
+                inProcessEl.width / 2
+            ) {
+              info.newTop = placeholderTop;
+              info.newLeft = placeholderLeft;
+              placeholderSeted = true;
+              plIndex = itIndex;
             }
           }
           if (!el.classList.contains("gs-sortable-placeholder")) {
-            el.style.left = `${containerPL}px`;
             if (currentTop == containerPT) {
-              el.style.top = `${containerPT}px`;
               currentTop = containerPT + height;
               currentHeight = currentHeight + height;
             } else {
-              el.style.top = `${currentTop + gapY}px`;
               currentTop = currentTop + gapY + height;
               currentHeight = currentHeight + height + gapY;
             }
           }
         } else if (params.type == types.row) {
-          if (itIndex == plIndex) {
-            info.placeholder.style.top = `${containerPT}px`;
-            info.newTop = containerPT;
-            if (currentLeft == containerPL) {
-              info.newLeft = containerPL;
-              info.placeholder.style.left = `${containerPL}px`;
-              currentLeft = containerPL + inProcessEl.width;
-            } else {
-              info.newLeft = currentLeft + gapX;
-              info.placeholder.style.left = `${currentLeft + gapX}px`;
-              currentLeft = currentLeft + gapX + inProcessEl.width;
+          if (!placeholderSeted) {
+            let placeholderLeft =
+              currentLeft == containerPL ? containerPL : currentLeft + gapX;
+            let placeholderTop = containerPT;
+            if (
+              Math.abs(placeholderTop - inProcessEl.top) <
+                inProcessEl.height / 2 &&
+              Math.abs(placeholderLeft - inProcessEl.left) <
+                inProcessEl.width / 2
+            ) {
+              info.newTop = placeholderTop;
+              info.newLeft = placeholderLeft;
+              placeholderSeted = true;
+              plIndex = itIndex;
             }
           }
           if (!el.classList.contains("gs-sortable-placeholder")) {
-            el.style.top = `${containerPT}px`;
             if (currentLeft == containerPL) {
-              el.style.left = `${containerPL}px`;
               currentLeft = containerPL + width;
               currentWidth = currentWidth + width;
             } else {
-              el.style.left = `${currentLeft + gapX}px`;
               currentLeft = currentLeft + gapX + width;
               currentWidth = currentWidth + width + gapX;
             }
-          }
-          if (height > maxHeight) {
-            maxHeight = height;
+            if (height > maxHeight) {
+              maxHeight = height;
+            }
           }
         } else if (params.type == types.grid) {
-          if (itIndex == plIndex) {
-            const left =
-              itIndex % params.count == 0
-                ? containerPL
-                : containerPL + (itIndex % params.count) * (itemWidth + gapX);
-            const top = currentTop;
-            if (inProcessEl.height > colHeight) {
-              colHeight = inProcessEl.height;
-            }
-            if (
-              itIndex % params.count === params.count - 1 ||
-              itIndex === itemsCount - 1
-            ) {
-              if (top === containerPT) {
-                currentHeight = currentHeight + colHeight;
-              } else {
-                currentHeight = currentHeight + colHeight + gapY;
-              }
-              currentTop = currentTop + colHeight + gapY;
-              colHeight = 0;
-              ref.grid.style.height = `${currentHeight}px`;
-            }
-            itIndex += 1;
-            info.newTop = top;
-            info.newLeft = left;
-            info.placeholder.style.left = `${left}px`;
-            info.placeholder.style.top = `${top}px`;
+          const placeholderLeft =
+            itIndex % params.count == 0
+              ? containerPL
+              : containerPL + (itIndex % params.count) * (itemWidth + gapX);
+          const placeholderTop = currentTop;
+          if (
+            Math.abs(placeholderTop - inProcessEl.top) <
+              inProcessEl.height / 2 &&
+            Math.abs(placeholderLeft - inProcessEl.left) < inProcessEl.width / 2
+          ) {
+            info.newTop = placeholderTop;
+            info.newLeft = placeholderLeft;
+            placeholderSeted = true;
+            plIndex = itIndex;
           }
           if (!el.classList.contains("gs-sortable-placeholder")) {
-            const left =
-              itIndex % params.count == 0
-                ? containerPL
-                : containerPL + (itIndex % params.count) * (itemWidth + gapX);
             const top = currentTop;
             if (height > colHeight) {
               colHeight = height;
@@ -267,15 +133,145 @@ const calculateOnSort = (ref) => {
               }
               currentTop = currentTop + colHeight + gapY;
               colHeight = 0;
-              ref.grid.style.height = `${currentHeight}px`;
             }
-            el.style.left = `${left}px`;
-            el.style.top = `${top}px`;
           }
         }
         itIndex += 1;
       }
     });
+    {
+      info.index = plIndex;
+      let {
+        containerPT,
+        containerPL,
+        currentHeight,
+        currentWidth,
+        itemWidth,
+        gapX,
+        gapY,
+      } = ref.uiData;
+
+      currentLeft = containerPL;
+      currentTop = containerPT;
+      itIndex = 0;
+      $items.map((el) => {
+        if (!el.classList.contains("gs-sortable-item-inmove")) {
+          const height = el.offsetHeight;
+          const width = el.offsetWidth;
+          if (params.type == types.column) {
+            if (itIndex == plIndex) {
+              info.placeholder.style.left = `${containerPL}px`;
+              info.newLeft = containerPL;
+              if (currentTop == containerPT) {
+                info.newTop = containerPT;
+                info.placeholder.style.top = `${containerPT}px`;
+                currentTop = containerPT + inProcessEl.height;
+              } else {
+                info.newTop = currentTop + gapY;
+                info.placeholder.style.top = `${currentTop + gapY}px`;
+                currentTop = currentTop + gapY + inProcessEl.height;
+              }
+            }
+            if (!el.classList.contains("gs-sortable-placeholder")) {
+              el.style.left = `${containerPL}px`;
+              if (currentTop == containerPT) {
+                el.style.top = `${containerPT}px`;
+                currentTop = containerPT + height;
+                currentHeight = currentHeight + height;
+              } else {
+                el.style.top = `${currentTop + gapY}px`;
+                currentTop = currentTop + gapY + height;
+                currentHeight = currentHeight + height + gapY;
+              }
+            }
+          } else if (params.type == types.row) {
+            if (itIndex == plIndex) {
+              info.placeholder.style.top = `${containerPT}px`;
+              info.newTop = containerPT;
+              if (currentLeft == containerPL) {
+                info.newLeft = containerPL;
+                info.placeholder.style.left = `${containerPL}px`;
+                currentLeft = containerPL + inProcessEl.width;
+              } else {
+                info.newLeft = currentLeft + gapX;
+                info.placeholder.style.left = `${currentLeft + gapX}px`;
+                currentLeft = currentLeft + gapX + inProcessEl.width;
+              }
+            }
+            if (!el.classList.contains("gs-sortable-placeholder")) {
+              el.style.top = `${containerPT}px`;
+              if (currentLeft == containerPL) {
+                el.style.left = `${containerPL}px`;
+                currentLeft = containerPL + width;
+                currentWidth = currentWidth + width;
+              } else {
+                el.style.left = `${currentLeft + gapX}px`;
+                currentLeft = currentLeft + gapX + width;
+                currentWidth = currentWidth + width + gapX;
+              }
+            }
+            if (height > maxHeight) {
+              maxHeight = height;
+            }
+          } else if (params.type == types.grid) {
+            if (itIndex == plIndex) {
+              const left =
+                itIndex % params.count == 0
+                  ? containerPL
+                  : containerPL + (itIndex % params.count) * (itemWidth + gapX);
+              const top = currentTop;
+              if (inProcessEl.height > colHeight) {
+                colHeight = inProcessEl.height;
+              }
+              if (
+                itIndex % params.count === params.count - 1 ||
+                itIndex === itemsCount - 1
+              ) {
+                if (top === containerPT) {
+                  currentHeight = currentHeight + colHeight;
+                } else {
+                  currentHeight = currentHeight + colHeight + gapY;
+                }
+                currentTop = currentTop + colHeight + gapY;
+                colHeight = 0;
+                ref.grid.style.height = `${currentHeight}px`;
+              }
+              itIndex += 1;
+              info.newTop = top;
+              info.newLeft = left;
+              info.placeholder.style.left = `${left}px`;
+              info.placeholder.style.top = `${top}px`;
+            }
+            if (!el.classList.contains("gs-sortable-placeholder")) {
+              const left =
+                itIndex % params.count == 0
+                  ? containerPL
+                  : containerPL + (itIndex % params.count) * (itemWidth + gapX);
+              const top = currentTop;
+              if (height > colHeight) {
+                colHeight = height;
+              }
+              if (
+                itIndex % params.count === params.count - 1 ||
+                itIndex === itemsCount - 1
+              ) {
+                if (top === containerPT) {
+                  currentHeight = currentHeight + colHeight;
+                } else {
+                  currentHeight = currentHeight + colHeight + gapY;
+                }
+                currentTop = currentTop + colHeight + gapY;
+                colHeight = 0;
+                ref.grid.style.height = `${currentHeight}px`;
+              }
+              el.style.left = `${left}px`;
+              el.style.top = `${top}px`;
+            }
+          }
+          itIndex += 1;
+        }
+      });
+    }
   }
 };
 

package/dist/actions/initDraggable.js

@@ -1,5 +1,5 @@
-import constParams from '../constants/constParams';
-import { getOffsetFromBody, getOffsetFromWindow } from './general';
+import constParams from "../constants/constParams";
+import { getOffsetFromBody, getOffsetFromWindow } from "./general";
 
 const initDraggable = (ref) => {
   const params = ref.currentParams;
@@ -8,9 +8,9 @@ const initDraggable = (ref) => {
   $items.map(($el, index) => {
     $el.onmousedown = null;
     const handler =
-      params.handler != '' ? $el.querySelector(params.handler) : $el;
+      params.handler != "" ? $el.querySelector(params.handler) : $el;
     if (handler != null) {
-      handler.style.cursor = 'move';
+      handler.style.cursor = "move";
       handler.onmousedown = (e) => {
         if (!ref.isAddjusting) {
           window.GSSortableConfigue.overInItemRef = ref;
@@ -20,19 +20,26 @@ const initDraggable = (ref) => {
           const containerStyles = getComputedStyle(container);
           const paddingTop = parseFloat(containerStyles.paddingTop);
           const paddingLeft = parseFloat(containerStyles.paddingLeft);
-          const placeholder = document.createElement('div');
           const top = parseFloat(elStyles.top);
           const left = parseFloat(elStyles.left);
-          placeholder.classList.add('gs-sortable-placeholder');
-          placeholder.style.position = elStyles.position;
-          placeholder.style.transition = `left ${constParams.animateionSpeed}ms, top ${constParams.animateionSpeed}ms, transform ${constParams.animateionSpeed}ms, opacity ${constParams.animateionSpeed}ms, opacity ${constParams.animateionSpeed}ms`;
-          placeholder.style.width = `${$el.offsetWidth}px`;
-          placeholder.style.height = `${$el.offsetHeight}px`;
-          placeholder.style.top = `${top}px`;
-          placeholder.style.left = `${left}px`;
-          placeholder.style.border = elStyles.border;
-          placeholder.style.borderRadius = elStyles.borderRadius;
-          ref.grid.append(placeholder);
+          let $draggaleEl = $el;
+          const placeholder = document.createElement("div");
+          if (!params.takeClone) {
+            placeholder.classList.add("gs-sortable-placeholder");
+            placeholder.style.position = elStyles.position;
+            placeholder.style.transition = `left ${constParams.animateionSpeed}ms, top ${constParams.animateionSpeed}ms, transform ${constParams.animateionSpeed}ms, opacity ${constParams.animateionSpeed}ms, opacity ${constParams.animateionSpeed}ms`;
+            placeholder.style.width = `${$el.offsetWidth}px`;
+            placeholder.style.height = `${$el.offsetHeight}px`;
+            placeholder.style.top = `${top}px`;
+            placeholder.style.left = `${left}px`;
+            placeholder.style.border = elStyles.border;
+            placeholder.style.borderRadius = elStyles.borderRadius;
+            ref.grid.append(placeholder);
+          } else {
+            const $cloneEl = $el.cloneNode(true);
+            ref.grid.append($cloneEl);
+            $draggaleEl = $cloneEl;
+          }
 
           const elOffsetWindow = getOffsetFromWindow($el);
 
@@ -44,17 +51,17 @@ const initDraggable = (ref) => {
           if (!isNaN(parseFloat(left))) {
             translateX = parseFloat(left);
           }
-          $el.style.transform = ` translate(${translateX - paddingLeft}px, ${
-            translateY - paddingTop
-          }px)`;
-          $el.style.top = `${paddingTop}px`;
-          $el.style.left = `${paddingLeft}px`;
+          $draggaleEl.style.transform = ` translate(${
+            translateX - paddingLeft
+          }px, ${translateY - paddingTop}px)`;
+          $draggaleEl.style.top = `${paddingTop}px`;
+          $draggaleEl.style.left = `${paddingLeft}px`;
 
           window.GSSortableConfigue.draggableInfo = {
             moved: false,
             ref: ref,
             index,
-            $el,
+            $el: $draggaleEl,
             clientX: e.clientX,
             clientY: e.clientY,
             placeholder,
@@ -64,12 +71,12 @@ const initDraggable = (ref) => {
             fromTop: (e.clientY - elOffsetWindow.top) / $el.offsetHeight,
           };
 
-          $el.classList.add('gs-sortable-item-inmove');
-          ref.grid.classList.add('gs-sortable-active');
-          if (ref.grid.closest('.gs-sortable-item') != null) {
+          $draggaleEl.classList.add("gs-sortable-item-inmove");
+          ref.grid.classList.add("gs-sortable-active");
+          if (ref.grid.closest(".gs-sortable-item") != null) {
             ref.grid
-              .closest('.gs-sortable-item')
-              .classList.add('gs-sortable-item-active-parent');
+              .closest(".gs-sortable-item")
+              .classList.add("gs-sortable-item-active-parent");
           }
         }
       };

package/dist/actions/initMouseMove.js

@@ -1,10 +1,8 @@
-import { getOffsetFromWindow, getTranslateCoord } from './general';
-import getItemPositionToContainer from './checkItemInContainer';
-import checkItemInContainer from './checkItemInContainer';
-import calculate from './calculate';
-import constParams from '../constants/constParams';
-import calculateOnSort from './calculateOnSort';
-import types from '../constants/types';
+import { getOffsetFromWindow, getTranslateCoord } from "./general";
+import checkItemInContainer from "./checkItemInContainer";
+import calculate from "./calculate";
+import constParams from "../constants/constParams";
+import calculateOnSort from "./calculateOnSort";
 
 const initMouseMove = (event) => {
   const info = window.GSSortableConfigue.draggableInfo;
@@ -21,24 +19,22 @@ const initMouseMove = (event) => {
         allRefs.push(item.ref);
       }
     });
-    let findedRef = '';
+    let findedRef = "";
     allRefs.map((item) => {
       if (checkItemInContainer(item.grid, info.$el)) {
         findedRef = item.currentParams.reference;
       }
     });
-    if (findedRef !== '') {
-      //if (window.GSSortableConfigue.overInItemRef == undefined) {
+    if (findedRef !== "") {
       const newRef = window.GSSortableConfigue.instance(findedRef);
       if (
         newRef != undefined &&
         info.ref.currentParams.reference !== newRef.currentParams.reference
       ) {
-        if (document.querySelector('.gs-sortable-placeholder') != null) {
-          document.querySelector('.gs-sortable-placeholder').remove();
+        if (document.querySelector(".gs-sortable-placeholder") != null) {
+          document.querySelector(".gs-sortable-placeholder").remove();
           calculate(window.GSSortableConfigue.overInItemRef);
         }
-        const oldRef = window.GSSortableConfigue.overInItemRef;
         window.GSSortableConfigue.overInItemRef = newRef;
         info.$el.style.width =
           window.GSSortableConfigue.overInItemRef.itemWidth;
@@ -55,30 +51,31 @@ const initMouseMove = (event) => {
           event.clientX - newContainerOffset.left - newWidth * info.fromLeft;
 
         const elStyles = getComputedStyle(info.$el);
-        const placeholder = document.createElement('div');
         const top = parseFloat(elStyles.top);
         const left = parseFloat(elStyles.left);
-        placeholder.classList.add('gs-sortable-placeholder');
-        placeholder.style.position = elStyles.position;
-        info.$el.style.transform = `translate(${translateX}px, ${translateY}px)`;
-        placeholder.style.transition = `left ${constParams.animateionSpeed}ms, top ${constParams.animateionSpeed}ms, transform ${constParams.animateionSpeed}ms, opacity ${constParams.animateionSpeed}ms, opacity ${constParams.animateionSpeed}ms`;
+        if (!window.GSSortableConfigue.overInItemRef.currentParams.takeClone) {
+          const placeholder = document.createElement("div");
+          placeholder.classList.add("gs-sortable-placeholder");
+          placeholder.style.position = elStyles.position;
+          info.$el.style.transform = `translate(${translateX}px, ${translateY}px)`;
+          placeholder.style.transition = `left ${constParams.animateionSpeed}ms, top ${constParams.animateionSpeed}ms, transform ${constParams.animateionSpeed}ms, opacity ${constParams.animateionSpeed}ms, opacity ${constParams.animateionSpeed}ms`;
 
-        placeholder.style.top = `${top}px`;
-        placeholder.style.left = `${left}px`;
-        placeholder.style.border = elStyles.border;
-        placeholder.style.borderRadius = elStyles.borderRadius;
-        info.placeholder = placeholder;
-        info.ref = newRef;
-        placeholder.style.width = `${info.$el.offsetWidth}px`;
-        placeholder.style.height = `${info.$el.offsetHeight}px`;
-        newRef.grid.append(placeholder);
-        calculate(newRef);
-        return;
+          placeholder.style.top = `${top}px`;
+          placeholder.style.left = `${left}px`;
+          placeholder.style.border = elStyles.border;
+          placeholder.style.borderRadius = elStyles.borderRadius;
+          info.placeholder = placeholder;
+          info.ref = newRef;
+          placeholder.style.width = `${info.$el.offsetWidth}px`;
+          placeholder.style.height = `${info.$el.offsetHeight}px`;
+          newRef.grid.append(placeholder);
+          calculate(newRef);
+          return;
+        } else {
+          info.ref = newRef;
+        }
       }
-      // } else {
-      // }
     }
-    //if (window.GSSortableConfigue.overInItemRef != undefined) {
     const params = info.ref.currentParams;
     const clientX = event.clientX;
     const clientY = event.clientY;
@@ -109,10 +106,9 @@ const initMouseMove = (event) => {
     }
     $el.style.transform = `translate(${tranlateX}px, ${tranlateY}px)`;
 
-    if (findedRef != '') {
+    if (findedRef != "") {
       calculateOnSort(window.GSSortableConfigue.overInItemRef);
     }
-    //}
   }
   window.scrollY = document.documentElement.scrollTop;
   window.scrollX = document.documentElement.scrollLeft;

package/dist/actions/initSortEnd.js

@@ -1,6 +1,6 @@
-import constParams from '../constants/constParams';
-import calculate from './calculate';
-import { getOffsetFromBody, moveChildToIndex } from './general';
+import constParams from "../constants/constParams";
+import calculate from "./calculate";
+import { getOffsetFromBody, moveChildToIndex } from "./general";
 
 const initSortEnd = (event) => {
   const info = { ...window.GSSortableConfigue.draggableInfo };
@@ -22,42 +22,51 @@ const initSortEnd = (event) => {
       info.ref.isAddjusting = true;
       const $el = info.$el;
       const placeholder = info.placeholder;
-      info.$el.classList.remove('gs-sortable-item-inmove');
-      info.ref.grid.classList.remove('gs-sortable-active');
-      if (info.ref.grid.closest('.gs-sortable-item-active-parent') != null) {
+      info.$el.classList.remove("gs-sortable-item-inmove");
+      info.ref.grid.classList.remove("gs-sortable-active");
+      if (info.ref.grid.closest(".gs-sortable-item-active-parent") != null) {
         info.ref.grid
-          .closest('.gs-sortable-item-active-parent')
-          .classList.remove('gs-sortable-item-active-parent');
+          .closest(".gs-sortable-item-active-parent")
+          .classList.remove("gs-sortable-item-active-parent");
       }
-      info.$el.classList.add('gs-sortable-item-addjusting');
+      info.$el.classList.add("gs-sortable-item-addjusting");
       window.GSSortableConfigue.draggableInfo = undefined;
       info.$el.style.top = `${info.newTop + containerDifY}px`;
       info.$el.style.left = `${info.newLeft + containerDifX}px`;
-      info.$el.style.removeProperty('transform');
+      info.$el.style.removeProperty("transform");
       setTimeout(() => {
-        $el.classList.remove('gs-sortable-item-addjusting');
-        // if (
-        //   info.ref.currentParams.reference ===
-        //   window.GSSortableConfigue.takeFrom.currentParams.reference
-        // ) {
-        if (info.index != undefined) {
-          moveChildToIndex(info.ref.grid, info.$el, info.index);
+        $el.classList.remove("gs-sortable-item-addjusting");
+        if (
+          info.ref.currentParams.reference ===
+            window.GSSortableConfigue.takeFrom.currentParams.reference &&
+          window.GSSortableConfigue.takeFrom.currentParams.takeClone
+        ) {
+          info.$el.remove();
+        } else {
+          if (info.index != undefined) {
+            moveChildToIndex(info.ref.grid, info.$el, info.index);
+          }
         }
-        // }
-        // else{
-        //   if (info.index != undefined) {
-        //     moveChildToIndex(info.ref.grid, info.$el, info.index);
-        //   }
-        // }
         placeholder.remove();
         if (
           info.ref.currentParams.reference !==
           window.GSSortableConfigue.takeFrom.currentParams.reference
         ) {
+          window.GSSortableConfigue.takeFrom.currentParams.afterSort(
+            window.GSSortableConfigue.takeFrom.grid.querySelectorAll(
+              ".gs-sortable-item"
+            )
+          );
+          info.ref.currentParams.afterSort(
+            info.ref.grid.querySelectorAll(".gs-sortable-item")
+          );
           window.GSSortableConfigue.takeFrom.refresh();
           info.ref.refresh();
         } else {
           calculate(info.ref);
+          info.ref.currentParams.afterSort(
+            info.ref.grid.querySelectorAll(".gs-sortable-item")
+          );
         }
         info.ref.isAddjusting = false;
       }, constParams.animateionSpeed);
@@ -65,7 +74,7 @@ const initSortEnd = (event) => {
       const placeholder = info.placeholder;
       info.$el.style.top = `${info.newTop}px`;
       info.$el.style.left = `${info.newLeft}px`;
-      info.$el.style.removeProperty('transform');
+      info.$el.style.removeProperty("transform");
       placeholder.remove();
       window.GSSortableConfigue.draggableInfo = undefined;
     }

package/dist/components/GSSortable.js

@@ -20,6 +20,7 @@ const params = {
   reference: PropTypes.string,
   handler: PropTypes.string,
   className: PropTypes.string,
+  afterSort: PropTypes.func,
   gsx: PropTypes.object,
   gap: PropTypes.string,
   allowOutOfBox: PropTypes.bool,
@@ -36,6 +37,7 @@ const params = {
  * @param {boolean} props.className - Enable add classes.
  * @param {React.CSSProperties & Record<string, React.CSSProperties | Record<string, React.CSSProperties | Record<string, React.CSSProperties | Record<string, React.CSSProperties>>>} props.gsx
  * @param {string} props.gap - Allows set gap among elements.
+ * @param {func} props.afterSort - this is callback function which called after sort.
  * @param {string} props.handler - selector of target element to move.
  * @param {number} props.count - Shows items count per row.
  * @param {'row' | 'column' | 'grid'} props.type - this is the type of prop.

package/dist/constants/defaultParams.js

@@ -3,6 +3,7 @@ import types from './types';
 const defaultParams = {
   acceptFrom: [],
   className: '',
+  takeClone: false,
   reference: '',
   count: 3,
   gap: '',
@@ -12,6 +13,7 @@ const defaultParams = {
   type: types.column,
   allowOutOfBox: true,
   responsive: [],
+  afterSort: () => {},
 };
 
 export default Object.freeze(defaultParams);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@get-set/gs-sortable",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "Get-Set Sortable",
   "main": "index.js",
   "author": "Get-Set",