npm package: @licuido-ui/ui_draggable-layout
Description: DraggableLayout - DraggableLayout component, You Can drag and move the layout Mostly you can customize the Layout and using  this to display the layout  `import '@licuido-ui/ui_draggable-layout/dist/index.css'`
Latest version: 3.0.4

# DraggableLayout

DraggableLayout - DraggableLayout component, You Can drag and move the layout Mostly you can customize the Layout and using  this to display the layout  `import '@licuido-ui/ui_draggable-layout/dist/index.css'`

### Author

- @author Arunachalam R <arunachalam@crayond.co>

## Link

[Story Book Link Calender](http://216.48.182.148:3333/?path=/docs/components-draggablelayout--docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_draggable-layout
```

## Import component

```jsx
import { DraggableLayout } from '@licuido-ui/ui_draggable-layout';
```

## Usage

```jsx
<DraggableLayout
     layout={  {
        title: 'component 1',
        ChildrenComponent: 'children'
        RightSideAction: <Move width={'14px'} />,
        poisitionX: 1,
        positionY:2,
        width:2,
        height:2,
      },
      {
        title: 'component 2',
        ChildrenComponent: 'children'
        RightSideAction: <Move width={'14px'} />,
        poisitionX: 1,
        positionY:2,
        width:2,
        height:2,
      },
      {
        title: 'component 3',
        ChildrenComponent: 'children'
        RightSideAction: <Move width={'14px'} />,
        poisitionX: 1,
        positionY:2,
        width:2,
        height:2,
      },
      {
        title: 'component 4',
        ChildrenComponent: 'children'
        RightSideAction: <Move width={'14px'} />,
        poisitionX: 1,
        positionY:2,
        width:2,
        height:2,
      },
      {
        title: 'component 5',
        ChildrenComponent: 'children'
        RightSideAction: <Move width={'14px'} />,
        poisitionX: 1,
        positionY:2,
        width:2,
        height:2,
      },}
     onLayoutChange={onLayoutChange} 
    breakPoints={ lg: 1200, md: 996, sm: 768, xs: 480,xxs: 0 }

    />
```
## Image

![alt text](./assets/layout.png)

## Samplecode

```jsx
<DraggableLayout
     layout={ [
       {
        title: 'component 1',
        ChildrenComponent: 'children'
        RightSideAction: <Move width={'14px'} />,
        poisitionX: 1,
        positionY:2,
        width:2,
        height:2,
      },
      {
        title: 'component 2',
        ChildrenComponent: 'children'
        RightSideAction: <Move width={'14px'} />,
        poisitionX: 1,
        positionY:2,
        width:2,
        height:2,
      },
      {
        title: 'component 3',
        ChildrenComponent: 'children'
        RightSideAction: <Move width={'14px'} />,
        poisitionX: 1,
        positionY:2,
        width:2,
        height:2,
      },
      {
        title: 'component 4',
        ChildrenComponent: 'children'
        RightSideAction: <Move width={'14px'} />,
        poisitionX: 1,
        positionY:2,
        width:2,
        height:2,
      },
      {
        title: 'component 5',
        ChildrenComponent: 'children'
        RightSideAction: <Move width={'14px'} />,
        poisitionX: 1,
        positionY:2,
        width:2,
        height:2,
      },
    ]}
     onLayoutChange={onLayoutChange} 
    styleProps= {
    layoutStyle: {
      border: '0px',
      borderRadius: '8px',
      backgroundColor: '#fff',
    },
    totalLayoutStyle: {
      backgroundColor: '#eee',
      cursor: 'grab',
    },
  }
   cols = { lg: 4, md: 4, sm: 4, xs: 1, xxs: 1 }
   width = {100}
   rowHeight = {150}
   localstoragekey={false}
    breakPoints={ lg: 1200, md: 996, sm: 768, xs: 480, xxs:0 }
        autoSize={true}

     />
```
### Props

 | **Name**              | **Description**                                              | **Default** | **Control **                                                                                                           |
 | --------------------- | ------------------------------------------------------------ | ----------- | ---------------------------------------------------------------------------------------------------------------------- |
 | **className**         | string                                                       | \-          | Set object                                                                                                             |
 | **sx**                | sx property                                                  | \-          | sx : \{\}                                                                                                              |
 | **compactTypeDefine** | we can define vertical or horizontal                         | \-          | horizontal                                                                                                             |
 | **cols**              | Cols is define as lg ,md,sm,xs                               | \-          | cols : \{lg : 4md : 4sm : 4xs : 1xxs : 1\}                                                                             |
 | **width**             | width of the Total layout                                    | \-          |
 | **autoSize**          | autosize                                                     | \-          | FalseTrue                                                                                                              |
 | **rowHeight**         | rowHeight of the Total layout                                | \-          |
 | **headingStyle**      | headingStyle                                                 | \-          | headingStyle : \{\}                                                                                                    |
 | **layoutBddId**       | layout BDD Id for BDD Test                                   | \-          |
 | **layoutBddTestId**   | layout BDD Test Id                                           | \-          |
 | **totalHeadingStyle** | totalHeadingStyle                                            | \-          | totalHeadingStyle : \{\}                                                                                               |
 | **totalLayoutStyle**  |                                                              | \-          | totalLayoutStyle : \{\}                                                                                                |
 | **ChildrenStyle**     | ChildrenStyle                                                | \-          | ChildrenStyle : \{\}                                                                                                   |
 | **styleProps**        | you can customize your css into style                        | \-          | styleProps : \{layoutStyle : \{\.\.\.\} 3 keystotalLayoutStyle : \{\.\.\.\} 2 keys\}                                   |
 | **localstorageKey**   | if u want to save in local u can use Localstorage key        | \-          | FalseTrue                                                                                                              |
 | **layout**            | layout has title, Children, rightsideicon, x, y width,height | \-          | layout : \[0 : \{\.\.\.\} 7 keys1 : \{\.\.\.\} 7 keys2 : \{\.\.\.\} 7 keys3 : \{\.\.\.\} 7 keys4 : \{\.\.\.\} 7 keys\] |
 | **breakPoints**       | breakpoints for Layout                                       | \-          | breakPoints : \{lg : 1200md : 996sm : 768xs : 480xxs : 0\}                                                             |