@get-set/gs-sortable 0.0.1 → 0.0.2

package/dist/actions/afterAllImagesLoad.js

@@ -0,0 +1,43 @@
+import calculate from "./calculate";
+
+const afterAllImagesLoad = (ref) => {
+  const $images = [...ref.grid.querySelectorAll("img")];
+  const count = $images.length;
+
+  if (count > 0) {
+    let alreadyLoaded = 0;
+    $images.map((img) => {
+      if (img.complete) {
+        alreadyLoaded++;
+        if (alreadyLoaded === count) {
+          setTimeout(() => {
+            calculate(ref);
+          }, 500);
+        }
+      } else {
+        img.onload = () => {
+          alreadyLoaded++;
+          if (alreadyLoaded === count) {
+            setTimeout(() => {
+              calculate(ref);
+            }, 500);
+          }
+        };
+        img.onerror = () => {
+          alreadyLoaded++;
+          if (alreadyLoaded === count) {
+            setTimeout(() => {
+              calculate(ref);
+            }, 500);
+          }
+        };
+      }
+    });
+  } else {
+    setTimeout(() => {
+      calculate(ref);
+    }, 500);
+  }
+};
+
+export default afterAllImagesLoad;

package/dist/actions/calculate.js

@@ -0,0 +1,142 @@
+import constParams from "../constants/constParams";
+import types from "../constants/types";
+
+const calculate = (ref) => {
+  console.log("calculate");
+  const params = ref.currentParams;
+  if (typeof ref.currentParams.beforeInit === "function") {
+    ref.currentParams.beforeInit();
+  }
+  const $items = [...ref.grid.children].filter(
+    (x) => !x.classList.contains("gs-sortable-item-inmove")
+  );
+  const itemsCount = $items.length;
+
+  ref.grid.style.position = "relative";
+  if (params.gap != "") {
+    ref.grid.style.gap = params.gap;
+  }
+  const gridStyles = getComputedStyle(ref.grid);
+  const cssGap = gridStyles.gap;
+  let gapX = 0;
+  let gapY = 0;
+  if (typeof cssGap !== "undefined" && cssGap !== null) {
+    const cssGapYValue = cssGap.includes(" ") ? cssGap.split(" ")[0] : cssGap;
+    const cssGapXValue = cssGap.includes(" ") ? cssGap.split(" ")[1] : cssGap;
+
+    const gapYSize = parseInt(cssGapYValue);
+    const gapXSize = parseInt(cssGapXValue);
+    if (!Number.isNaN(gapYSize)) {
+      gapY = gapYSize;
+    }
+    if (!Number.isNaN(gapXSize)) {
+      gapX = gapXSize;
+    }
+  }
+  const borderBottomWidth = parseFloat(gridStyles.borderBottomWidth);
+  const borderTopWidth = parseFloat(gridStyles.borderTopWidth);
+  const borderLeftWidth = parseFloat(gridStyles.borderLeftWidth);
+  const borderRightWidth = parseFloat(gridStyles.borderRightWidth);
+  const containerPT = parseFloat(gridStyles.paddingTop);
+  const containerPR = parseFloat(gridStyles.paddingRight);
+  const containerPB = parseFloat(gridStyles.paddingBottom);
+  const containerPL = parseFloat(gridStyles.paddingLeft);
+
+  const containerWidth = ref.grid.clientWidth - containerPR - containerPL;
+  let itemWidth = 0;
+  if (params.type == types.grid) {
+    itemWidth = (containerWidth - (params.count - 1) * gapX) / params.count;
+  }
+
+  const transition = `left ${constParams.animateionSpeed}ms, top ${constParams.animateionSpeed}ms, transform ${constParams.animateionSpeed}ms`;
+
+  let currentLeft = containerPL;
+  let currentTop = containerPT;
+  let currentHeight =
+    containerPT + containerPB + borderBottomWidth + borderTopWidth; //ref.grid.offsetHeight;
+  let currentWidth =
+    containerPL + containerPR + borderLeftWidth + borderRightWidth;
+  let maxHeight = 0;
+  $items.map((el) => {
+    el.style.position = "absolute";
+    if (params.type == types.column) {
+      el.style.width = `${containerWidth}px`;
+    } else if (params.type == types.grid) {
+      el.style.width = `${itemWidth}px`;
+    }
+    el.style.transition = transition;
+  });
+  ref.uiData = {
+    containerPT,
+    containerPR,
+    containerPB,
+    containerPL,
+    containerWidth,
+    currentHeight,
+    currentWidth,
+    itemWidth,
+    gapX,
+    gapY,
+  };
+  let colHeight = 0;
+  $items.map((el, index) => {
+    const height = el.offsetHeight;
+    const width = el.offsetWidth;
+    if (params.type == types.column) {
+      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) {
+      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) {
+      const left =
+        index % params.count == 0
+          ? containerPL
+          : containerPL + (index % params.count) * (itemWidth + gapX);
+      const top = currentTop;
+      if (height > colHeight) {
+        colHeight = height;
+      }
+      if (
+        index % params.count === params.count - 1 ||
+        index === itemsCount - 1
+      ) {
+        if (top === containerPT) {
+          currentHeight = currentHeight + colHeight;
+        } else {
+          currentHeight = currentHeight + colHeight + gapY;
+        }
+        currentTop = currentTop + colHeight + gapY;
+        colHeight = 0;
+      }
+      el.style.left = `${left}px`;
+      el.style.top = `${top}px`;
+    }
+  });
+  ref.grid.style.height = `${currentHeight}px`;
+  if (params.type == types.row) {
+    ref.grid.style.height = `${currentHeight + maxHeight}px`;
+    ref.grid.style.width = `${currentWidth}px`;
+  }
+};
+
+export default calculate;

package/dist/actions/calculateOnSort.js

@@ -0,0 +1,282 @@
+import types from "../constants/types";
+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;
+    let {
+      containerPT,
+      containerPR,
+      containerPB,
+      containerPL,
+      containerWidth,
+      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;
+      }
+    });
+  }
+};
+
+export default calculateOnSort;

package/dist/actions/checkItemInContainer.js

@@ -0,0 +1,28 @@
+import { getOffsetFromWindow } from './general';
+
+const checkItemInContainer = (grid, el) => {
+  const gridOffset = getOffsetFromWindow(grid);
+  const elOffset = getOffsetFromWindow(el);
+  const gridTop = gridOffset.top;
+  const gridLeft = gridOffset.left;
+  const elTop = elOffset.top;
+  const elLeft = elOffset.left;
+
+  const offsetTopFromGrid = elTop - gridTop;
+  const offsetLeftFromGrid = elLeft - gridLeft;
+  const elHeight = el.offsetHeight;
+  const elWidth = el.offsetWidth;
+  const gridHeight = grid.offsetHeight;
+  const gridWidth = grid.offsetWidth;
+  if (
+    offsetTopFromGrid >= (-1 * elHeight) / 2 &&
+    offsetLeftFromGrid >= (-1 * elWidth) / 2 &&
+    offsetTopFromGrid <= gridHeight - elHeight / 2 &&
+    offsetLeftFromGrid <= gridWidth - elWidth / 2
+  ) {
+    return true;
+  }
+  return false;
+};
+
+export default checkItemInContainer;

package/dist/actions/destroy.js

@@ -0,0 +1,19 @@
+const destroy = (ref) => {
+  ref.grid.classList.remove('gs-sortable-instance');
+  ref.grid.classList.remove(`gs-sortable-${ref.currentParams.type}`);
+  ref.grid.style.removeProperty('position');
+  ref.grid.style.removeProperty('gap');
+  ref.grid.style.removeProperty('height');
+  ref.grid.style.removeProperty('width');
+  [...ref.grid.children].map((el) => {
+    el.classList.remove('gs-sortable-item');
+    el.style.removeProperty('position');
+    el.style.removeProperty('width');
+    el.style.removeProperty('left');
+    el.style.removeProperty('top');
+    el.style.removeProperty('transition');
+  });
+  ref.count = ref.grid.children.length;
+};
+
+export default destroy;

package/dist/actions/general.js

@@ -0,0 +1,81 @@
+export const getTranslateCoord = (element) => {
+  const style = window.getComputedStyle(element);
+  // eslint-disable-next-line no-undef
+  const matrix = new WebKitCSSMatrix(style.transform);
+  return {
+    x: matrix.e,
+    y: matrix.f,
+  };
+};
+export const getOffsetFromBody = (el) => {
+  let top = 0,
+    left = 0;
+
+  // Loop through every parent element
+  while (el && el !== document.body) {
+    top += el.offsetTop || 0;
+    left += el.offsetLeft || 0;
+
+    // Handle transformations (i.e., translate, scale)
+    const transform = window.getComputedStyle(el).transform;
+    if (transform !== 'none') {
+      const matrix = new DOMMatrix(transform);
+      top += matrix.m42 || 0;
+      left += matrix.m41 || 0;
+    }
+
+    // If there's a positioned parent, move up the tree
+    el = el.offsetParent;
+  }
+
+  // Add scroll offsets for body, in case of page scrolling
+  top += document.body.scrollTop || document.documentElement.scrollTop || 0;
+  left += document.body.scrollLeft || document.documentElement.scrollLeft || 0;
+
+  return { top, left };
+};
+export const getOffsetFromWindow = (el) => {
+  let top = 0,
+    left = 0;
+
+  // Loop through each parent, accumulating the offset relative to the viewport
+  while (el) {
+    top += el.offsetTop || 0;
+    left += el.offsetLeft || 0;
+
+    // Handle transforms (translate, scale, etc.)
+    const transform = window.getComputedStyle(el).transform;
+    if (transform !== 'none') {
+      const matrix = new DOMMatrix(transform);
+      top += matrix.m42 || 0;
+      left += matrix.m41 || 0;
+    }
+
+    // Move to the next parent element
+    el = el.offsetParent;
+  }
+
+  // Subtract scroll position from the window (not the document)
+  top -= window.scrollY || 0;
+  left -= window.scrollX || 0;
+
+  return { top, left };
+};
+export const moveChildToIndex = (parent, child, newIndex) => {
+  let children = Array.from(parent.children);
+  let oldIndex = children.indexOf(child);
+  if (oldIndex !== newIndex) {
+    if (oldIndex === newIndex) return; // If not found or same position, do nothing
+
+    // Ensure the new index is within valid bounds
+    newIndex = Math.max(0, Math.min(newIndex, children.length - 1));
+
+    if (newIndex > oldIndex && oldIndex != -1) {
+      // Moving forward, so insert after the target index
+      parent.insertBefore(child, children[newIndex].nextSibling);
+    } else {
+      // Moving backward, insert before the target index
+      parent.insertBefore(child, children[newIndex]);
+    }
+  }
+};

package/dist/actions/getCurrentParams.js

@@ -0,0 +1,32 @@
+import _defaultParams from "../constants/defaultParams";
+
+const getCurrentParams = (params) => {
+  const defaultParams = { ..._defaultParams };
+  let finalParams = {
+    ...defaultParams,
+    ...params,
+  };
+
+  if (finalParams.responsive.length > 0) {
+    finalParams.responsive.sort((a, b) => b.windowSize - a.windowSize);
+  }
+
+  if (finalParams.responsive.length > 0) {
+    const windowSize = window.innerWidth;
+    const availableResponsives = finalParams.responsive.filter(
+      (resp) => resp.windowSize >= windowSize
+    );
+
+    availableResponsives.map((resp) => {
+      finalParams = {
+        ...finalParams,
+        ...resp.params,
+      };
+      return resp;
+    });
+  }
+
+  return finalParams;
+};
+
+export default getCurrentParams;

package/dist/actions/init.js

@@ -0,0 +1,20 @@
+import calculate from './calculate';
+import initDraggable from './initDraggable';
+
+const init = (ref) => {
+  ref.grid.classList.add('gs-sortable-instance');
+  ref.grid.classList.add(`gs-sortable-${ref.currentParams.type}`);
+  [...ref.grid.children].map((el) => {
+    el.classList.add('gs-sortable-item');
+
+    let resizeObserver = new ResizeObserver(() => {
+      calculate(ref);
+    });
+    resizeObserver.observe(el);
+  });
+  ref.count = ref.grid.children.length;
+
+  initDraggable(ref);
+};
+
+export default init;

package/dist/actions/initDraggable.js

@@ -0,0 +1,73 @@
+import constParams from '../constants/constParams';
+
+const initDraggable = (ref) => {
+  const params = ref.currentParams;
+
+  const $items = [...ref.grid.children];
+  $items.map(($el, index) => {
+    $el.onmousedown = null;
+    const handler =
+      params.handler != '' ? $el.querySelector(params.handler) : $el;
+    if (handler != null) {
+      handler.style.cursor = 'move';
+      handler.onmousedown = (e) => {
+        if (!ref.isAddjusting) {
+          window.GSSortableConfigue.overInItemRef = ref;
+          window.GSSortableConfigue.takeFrom = ref;
+          const container = ref.grid;
+          const elStyles = getComputedStyle($el);
+          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 translateX = 0;
+          let translateY = 0;
+          if (!isNaN(parseFloat(top))) {
+            translateY = parseFloat(top);
+          }
+          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`;
+
+          window.GSSortableConfigue.draggableInfo = {
+            moved: false,
+            ref: ref,
+            index,
+            $el,
+            clientX: e.clientX,
+            clientY: e.clientY,
+            placeholder,
+            newLeft: left,
+            newTop: top,
+          };
+          $el.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');
+          }
+        }
+      };
+    }
+  });
+};
+
+export default initDraggable;

package/dist/actions/initMouseMove.js

@@ -0,0 +1,105 @@
+import { getTranslateCoord } from './general';
+import getItemPositionToContainer from './checkItemInContainer';
+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;
+
+  if (info != undefined) {
+    info.moved = true;
+    const allRefs = [window.GSSortableConfigue.takeFrom];
+    window.GSSortableConfigue.references.map((item) => {
+      if (
+        item.ref.currentParams.acceptFrom.includes(
+          window.GSSortableConfigue.takeFrom.currentParams.reference
+        )
+      ) {
+        allRefs.push(item.ref);
+      }
+    });
+    let findedRef = '';
+    allRefs.map((item) => {
+      if (checkItemInContainer(item.grid, info.$el)) {
+        findedRef = item.currentParams.reference;
+      }
+    });
+    if (findedRef !== '') {
+      //if (window.GSSortableConfigue.overInItemRef == undefined) {
+      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();
+          calculate(window.GSSortableConfigue.overInItemRef);
+        }
+
+        window.GSSortableConfigue.overInItemRef = newRef;
+        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;
+        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 = `${info.$el.offsetWidth}px`;
+        placeholder.style.height = `${info.$el.offsetHeight}px`;
+        placeholder.style.top = `${top}px`;
+        placeholder.style.left = `${left}px`;
+        placeholder.style.border = elStyles.border;
+        placeholder.style.borderRadius = elStyles.borderRadius;
+        newRef.grid.append(placeholder);
+        info.placeholder = placeholder;
+        info.ref = newRef;
+        calculate(newRef);
+        return;
+      }
+      // } else {
+      // }
+    }
+    //if (window.GSSortableConfigue.overInItemRef != undefined) {
+    const params = info.ref.currentParams;
+    const clientX = event.clientX;
+    const clientY = event.clientY;
+    const $el = info.$el;
+    const containerStyles = getComputedStyle(info.ref.grid);
+    const paddingLeft = parseFloat(containerStyles.paddingLeft);
+    const paddingTop = parseFloat(containerStyles.paddingTop);
+    const paddingRight = parseFloat(containerStyles.paddingRight);
+    const paddingBottom = parseFloat(containerStyles.paddingBottom);
+    const containerInnerHeight =
+      info.ref.grid.clientHeight - paddingTop - paddingBottom;
+    const containerInnerWidth =
+      info.ref.grid.clientWidth - paddingLeft - paddingRight;
+    const moveX = clientX - info.clientX;
+    const moveY = clientY - info.clientY;
+    const coord = getTranslateCoord($el);
+    info.clientX = clientX;
+    info.clientY = clientY;
+    let tranlateX = moveX + coord.x;
+    let tranlateY = moveY + coord.y;
+    if (!params.allowOutOfBox) {
+      const minY = 0;
+      const minX = 0;
+      const maxY = containerInnerHeight - $el.offsetHeight;
+      const maxX = containerInnerWidth - $el.offsetWidth;
+      tranlateX = Math.min(Math.max(tranlateX, minX), maxX);
+      tranlateY = Math.min(Math.max(tranlateY, minY), maxY);
+    }
+    $el.style.transform = `translate(${tranlateX}px, ${tranlateY}px)`;
+
+    if (findedRef != '') {
+      console.log('calculateOnSort');
+      calculateOnSort(window.GSSortableConfigue.overInItemRef);
+    }
+    //}
+  }
+  window.scrollY = document.documentElement.scrollTop;
+  window.scrollX = document.documentElement.scrollLeft;
+};
+
+export default initMouseMove;

package/dist/actions/initScroll.js

@@ -0,0 +1,23 @@
+import { getTranslateCoord } from './general';
+
+const initScroll = () => {
+  const info = window.GSSortableConfigue.draggableInfo;
+
+  if (info != undefined) {
+    const $el = info.$el;
+    const coord = getTranslateCoord(info.$el);
+    let translateX = coord.x;
+    let translateY = coord.y;
+    const scrollY = document.documentElement.scrollTop;
+    const scrollX = document.documentElement.scrollLeft;
+    const scrollYDist = scrollY - window.scrollY;
+    const scrollXDist = scrollX - window.scrollX;
+    translateX = translateX + scrollXDist;
+    translateY = translateY + scrollYDist;
+    window.scrollY = scrollY;
+    window.scrollX = scrollX;
+    info.$el.style.transform = `translate(${translateX}px, ${translateY}px)`;
+  }
+};
+
+export default initScroll;

package/dist/actions/initSortEnd.js

@@ -0,0 +1,75 @@
+import constParams from '../constants/constParams';
+import calculate from './calculate';
+import { getOffsetFromBody, moveChildToIndex } from './general';
+
+const initSortEnd = (event) => {
+  const info = { ...window.GSSortableConfigue.draggableInfo };
+  if (window.GSSortableConfigue.draggableInfo != undefined) {
+    if (info.moved) {
+      let containerDifX = 0;
+      let containerDifY = 0;
+      if (
+        info.ref.currentParams.reference !==
+        window.GSSortableConfigue.takeFrom.currentParams.reference
+      ) {
+        const fromCoord = getOffsetFromBody(
+          window.GSSortableConfigue.takeFrom.grid
+        );
+        const toCoord = getOffsetFromBody(info.ref.grid);
+        containerDifY = toCoord.top - fromCoord.top;
+        containerDifX = toCoord.left - fromCoord.left;
+      }
+      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.ref.grid
+          .closest('.gs-sortable-item-active-parent')
+          .classList.remove('gs-sortable-item-active-parent');
+      }
+      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');
+      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);
+        }
+        // }
+        // 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.refresh();
+          info.ref.refresh();
+        } else {
+          calculate(info.ref);
+        }
+        info.ref.isAddjusting = false;
+      }, constParams.animateionSpeed);
+    } else {
+      const placeholder = info.placeholder;
+      info.$el.style.top = `${info.newTop}px`;
+      info.$el.style.left = `${info.newLeft}px`;
+      info.$el.style.removeProperty('transform');
+      placeholder.remove();
+      window.GSSortableConfigue.draggableInfo = undefined;
+    }
+  }
+};
+
+export default initSortEnd;

package/dist/components/GSSortable.js

@@ -0,0 +1,145 @@
+import { useEffect, useRef, useState } from 'react';
+import NewGuid from '../helpers/uihelpers';
+import getCurrentParams from '../actions/getCurrentParams';
+import init from './actions/init';
+import destroy from './actions/destroy';
+import PropTypes from 'prop-types';
+import init from '../actions/init';
+import defaultParams from '../constants/defaultParams';
+import initMouseMove from "./actions/initMouseMove";
+import initSortEnd from "./actions/initSortEnd";
+import initScroll from "./actions/initScroll";
+
+const params = {
+  reference: PropTypes.string,
+  gap: PropTypes.string,
+  count: PropTypes.number,
+  resetSortHandler: PropTypes.number,
+  resetFilterHandler: PropTypes.number,
+};
+
+/**
+ * GSSortable component to display a customizable sortable.
+ *
+ * @component
+ * @param {Object} props - The props object.
+ * @param {string} props.gap - Allows set gap among elements.
+ * @param {number} props.count - Shows items count per row.
+ * @param {Object} props.resetSortHandler - This is the ref of that element which should reset order.
+ * @param {Object} props.resetFilterHandler - This is the ref of that element which should reset filter.
+ * @param {Array<Object>} [props.sortByOptions] - Array of sort options.
+ * @param {number} props.sortByOptions[].handler - This is the ref of that element which should change order.
+ * @param {string} props.sortByOptions[].prop - this is the name of data attribute of element like data-[prop].
+ * @param {'number' | 'string'} props.sortByOptions[].type - this is the type of prop.
+ * @param {Array<Object>} [props.filterByOptions] - Array of filter options.
+ * @param {number} props.filterByOptions[].handler - This is the ref of that element which should change filter.
+ * @param {string} props.filterByOptions[].prop - This is the name of data attribute of element like data-[prop].
+ * @param {'number' | 'string'} props.filterByOptions[].value - This is the value of prop for element.
+ * @param {Array<Object>} [props.responsive] - Array of responsive configurations based on window size.
+ * @param {number} props.responsive[].windowSize - Minimum window size for this configuration.
+ * @param {Object} props.responsive[].params - The responsive configuration for the grid.
+ * @returns {JSX.Element} The rendered sortable component.
+ */
+
+const GSSortable = ({ children, ...rest }) => {
+  const params = { ...rest };
+  const [componentKey, setComponentKey] = useState(null);
+  const gridRef = useRef(null);
+
+  useEffect(() => {
+    if (componentKey != null) {
+      if (typeof window.GSSortableConfigue === 'undefined') {
+        window.GSSortableConfigue = {
+          references: [],
+          instance: ref => {
+            if (ref != undefined && ref != '') {
+              const instance = window.GSSortableConfigue.references.find(
+                x => x.key === ref,
+              );
+              if (instance != undefined) {
+                return instance.ref;
+              }
+            }
+          },
+        };
+        
+        window.addEventListener("mousemove", (e) => {
+          initMouseMove(e);
+        });
+        window.addEventListener("mouseup", (e) => {
+          initSortEnd(e);
+        });
+        window.addEventListener("scroll", () => {
+          initScroll();
+        });
+      }
+      if (
+        window.GSSortableConfigue.references.find(
+          x => x.key === componentKey,
+        ) === undefined
+      ) {
+        const currentParams = getCurrentParams(params);
+
+        window.GSSortableConfigue.references.push({
+          key: componentKey,
+          ref: {
+            isAddjusting: false,
+            grid: gridRef.current,
+            currentParams,
+            destroy: () => {
+              destroy(window.GSSortableConfigue.instance(_key));
+            },
+            refresh: () => {
+              destroy(window.GSSortableConfigue.instance(_key));
+              init(window.GSSortableConfigue.instance(_key));
+            },
+          },
+        });
+
+        const currentRef = window.GSSortableConfigue.references.find(
+          x => x.key === componentKey,
+        ).ref;
+        init(currentRef);
+      }
+      return () => {
+        if (window.GSCarouselConfigue != undefined) {
+          window.GSCarouselConfigue.references =
+            window.GSCarouselConfigue.references.filter(
+              x => x.key !== componentKey,
+            );
+        }
+      };
+    }
+  }, [componentKey]);
+
+  useEffect(() => {
+    setComponentKey(
+      params.reference != undefined ? params.reference : NewGuid(),
+    );
+  }, []);
+
+  return (
+    <div
+      className={`gs-sortable-instance gs-sortable-${params.type}`}
+      ref={gridRef}
+      {...Object.fromEntries(
+        Object.entries({ ...rest }).filter(([key]) => !(key in defaultParams)),
+      )}>
+      {children}
+    </div>
+  );
+};
+
+GSSortable.propTypes = {
+  ...params,
+  responsive: PropTypes.arrayOf(
+    PropTypes.shape({
+      windowSize: PropTypes.number,
+      params: PropTypes.shape({
+        ...params,
+      }),
+    }),
+  ),
+};
+
+export default GSSortable;

package/dist/components/styles/GSSortable.css

@@ -0,0 +1,39 @@
+.gs-sortable-instance {
+  box-sizing: border-box;
+  -webkit-user-select: none !important;
+     -moz-user-select: none !important;
+          user-select: none !important;
+  transition: 0.4s;
+  z-index: 1;
+}
+.gs-sortable-instance.gs-sortable-active {
+  z-index: 2;
+}
+.gs-sortable-instance * {
+  -webkit-user-select: none !important;
+     -moz-user-select: none !important;
+          user-select: none !important;
+}
+.gs-sortable-instance .gs-sortable-placeholder {
+  position: absolute;
+  background-color: #f1f1f1;
+  border: 1px solid;
+  z-index: 1;
+}
+.gs-sortable-instance .gs-sortable-item {
+  z-index: 2;
+}
+.gs-sortable-instance .gs-sortable-item.gs-sortable-item-active-parent {
+  z-index: 3;
+}
+.gs-sortable-instance .gs-sortable-item-inmove {
+  transition: none !important;
+  z-index: 99999;
+}
+.gs-sortable-instance .gs-sortable-item-addjusting {
+  z-index: 99999;
+}
+.gs-sortable-instance.gs-sortable-row .gs-sortable-item {
+  width: -moz-max-content;
+  width: max-content;
+}/*# sourceMappingURL=GSSortable.css.map */

package/dist/components/styles/GSSortable.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["GSSortable.scss","GSSortable.css"],"names":[],"mappings":"AAAA;EACE,sBAAA;EACA,oCAAA;KAAA,iCAAA;UAAA,4BAAA;EACA,gBAAA;EACA,UAAA;ACCF;ADAE;EACE,UAAA;ACEJ;ADCE;EACE,oCAAA;KAAA,iCAAA;UAAA,4BAAA;ACCJ;ADCE;EACE,kBAAA;EACA,yBAAA;EACA,iBAAA;EACA,UAAA;ACCJ;ADCE;EACE,UAAA;ACCJ;ADAI;EACE,UAAA;ACEN;ADCE;EACE,2BAAA;EACA,cAAA;ACCJ;ADCE;EACE,cAAA;ACCJ;ADEI;EACE,uBAAA;EAAA,kBAAA;ACAN","file":"GSSortable.css"}

package/dist/components/styles/GSSortable.scss

@@ -0,0 +1,37 @@
+.gs-sortable-instance {
+  box-sizing: border-box;
+  user-select: none !important;
+  transition: 0.4s;
+  z-index: 1;
+  &.gs-sortable-active {
+    z-index: 2;
+  }
+
+  * {
+    user-select: none !important;
+  }
+  .gs-sortable-placeholder {
+    position: absolute;
+    background-color: #f1f1f1;
+    border: 1px solid;
+    z-index: 1;
+  }
+  .gs-sortable-item {
+    z-index: 2;
+    &.gs-sortable-item-active-parent {
+      z-index: 3;
+    }
+  }
+  .gs-sortable-item-inmove {
+    transition: none !important;
+    z-index: 99999;
+  }
+  .gs-sortable-item-addjusting {
+    z-index: 99999;
+  }
+  &.gs-sortable-row {
+    .gs-sortable-item {
+      width: max-content;
+    }
+  }
+}

package/dist/constants/constParams.js

@@ -0,0 +1,5 @@
+const constParams = {
+  animateionSpeed: 400,
+};
+
+export default Object.freeze(constParams);

package/dist/constants/defaultParams.js

@@ -0,0 +1,15 @@
+import types from './types';
+
+const defaultParams = {
+  acceptFrom: [],
+  reference: '',
+  count: 3,
+  gap: '',
+  handler: '',
+  width: 'auto',
+  type: types.column,
+  allowOutOfBox: true,
+  responsive: [],
+};
+
+export default Object.freeze(defaultParams);

package/dist/constants/types.js

@@ -0,0 +1,7 @@
+const types = {
+  row: 'row',
+  column: 'column',
+  grid: 'grid',
+};
+
+export default Object.freeze(types);

package/dist/helpers/uihelpers.js

@@ -0,0 +1,9 @@
+const NewGuid = () => {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    const r = (Math.random() * 16) | 0,
+      v = c == 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+};
+
+export default NewGuid;

package/package.json

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