wikiphp

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?

@Cassie Absolutely you are right. Codesandbox link: https://codesandbox.io/s/gsap-draggable-resizable-lknrc

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;

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.