[Resize element in X axis with specific measures as defined columns]

4 hours ago, GreenSock said:

I'm not sure I really understand what you're asking here, but maybe you just need to adjust your liveSnap x value like:

liveSnap: {x: (value) => gsap.utils.snap(100, value)},

And do that for your draggableRowElement Draggable too. 

It's exactly what I wanted. Thank you

It affect suddenly between columns but has gsap any animation for increase or decrease row width smoothly?

[Resize element in X axis with specific measures as defined columns]

@Cassie
Absolutely you are right.

Codesandbox link: https://codesandbox.io/s/gsap-draggable-resizable-lknrc

[Resize element in X axis with specific measures as defined columns]

Hi.

I have a resizable and draggable element that I want to resize width of that container in X axis for predefined columns. I mean user just can resize width of element until feeling a column from #1 to #12.

 

In tne uploaded image row container filled column #2 to #7.

 

It's my code and for my purpose I need your help.

 

import React, { FC, useContext, useEffect } from 'react';

import gsap from 'gsap';
import { Draggable } from 'gsap/dist/Draggable';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';

import { layoutDndGroupName } from '$components/pageLayouts/LayoutModal';
import { LayoutContext } from '$components/pageLayouts/LayoutModal/LayoutContext';
import { Header } from '$components/shared';
import { DragAndDropZones } from '$components/shared/modules/DragAndDrop';
import { getDnDId } from '$lib/utils';

const PlaygroundContainer = styled.div`
  width: 100%;
  height: 200px;
  position: relative;
  overflow: visible;
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.3) 1px, transparent 1px),
    linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
`;

export const Playground: FC = () => {
  const { t } = useTranslation();
  const { playgroundFields } = useContext(LayoutContext);

  const clamp = (value, min, max) => (value < min ? min : value > max ? max : value);

  const createResizable = (draggableRowElement) => {
    const dropzoneContainer = document.querySelector(
      `[data-zone-id="${DragAndDropZones.dropZone}-${layoutDndGroupName}"]`,
    ) as HTMLElement;

    const handle = document.createElement('div');
    handle.className = 'resize-handle';
    draggableRowElement.appendChild(handle);

    const draggableElementRect = draggableRowElement.getBoundingClientRect();

    gsap.set(handle, { x: draggableElementRect.width, y: draggableElementRect.height });

    const rect2 = handle.getBoundingClientRect();

    const offset = {
      x1: rect2.left - draggableElementRect.right,
      y1: rect2.top - draggableElementRect.bottom,
      x2: rect2.right - draggableElementRect.right,
      y2: rect2.bottom - draggableElementRect.bottom,
    };

    Draggable.create(draggableRowElement, {
      bounds: dropzoneContainer,
      autoScroll: 1,
      type: 'x',
    });

    Draggable.create(handle, {
      bounds: dropzoneContainer,
      autoScroll: 1,
      type: 'x',
      onPress(e) {
        e.stopPropagation();
      },
      onDrag() {
        gsap.set(draggableRowElement, { width: this.x + 0, height: this.y + 0 });
      },
      liveSnap: {
        x: (x) => clamp(x, -offset.x1, x + offset.x2),
        y: (y) => clamp(y, -offset.y1, y + offset.y2),
      },
    });
  };

  useEffect(() => {
    const draggableRowsContainer = document.querySelectorAll('.rowContainer');
    for (const draggableRowElement of draggableRowsContainer) {
      createResizable(draggableRowElement);
    }
  }, [playgroundFields]);

  return (
    <>
      <Header
        title={t('Playground')}
        subtitle={t('You can resize any section by select corners')}
      />

      <PlaygroundContainer data-zone-id={getDnDId('dropZone', layoutDndGroupName)}>
        {playgroundFields.map((field) => {
          return field.element;
        })}
      </PlaygroundContainer>
    </>
  );
};

export default Playground;

 

See the Pen by s (@s) on CodePen

[Drop draggable element into drop zone without remove draggable element]

Hi.

 

I want drop an draggable element which is as section into a drop zone container as playground without removing of draggable element.

Also in drop zone container i want append a draggable and resizable container when I dropped section.

I would be appreciate for helping me about implementation it in ReactJs.