@henryht/draggable NPM

Draggable for bootstrap

Small library for Bootstrap 5 that allows you to organize and rearrange your data

Install

npm i @henryht/draggable

Usage

Import the pakage.

import Draggable from '@henryht/draggable';
window.Draggable = Draggable;

Add the container.
```
<div id="container-draggable" ></div>
```

Data, The most important data includes: the ID, the name, and the children.

const tree = [
    { 
        id: 1,
        name: 'apples',
        description: "lorem lorem",
        children: [] 
    },
    { 
        id: 2,
        name: 'vegetables', 
        children: [] 
    },
    { 
        id: 3,
        name: 'pomelo', 
        children: [
            { 
                id: 7,
                name: 'apples 2', 
                description: "lorem lorem",
                children: [] 
            },
            { 
                id: 8,
                name: 'apples 3', 
                children: [] 
            },
        ] 
    },
    { 
        id: 4,
        name: 'oranges', 
        children: [] 
    },
    { 
        id: 5,
        name: 'fruits', 
        children: [
            { 
                id: 9,
                name: 'fornic', 
                children: [] 
            },
            { 
                id: 10,
                name: 'goku', 
                children: [] 
            },
        ] 
    },
    { 
        id: 6,
        name: 'brocolli', 
        description: "lorem lorem",
        children: [] 
    },
];

Instantiate the class, and the reorderable tree will be created automatically.
```
const drag = new Draggable(tree);
```
This method is always called once the reordering is complete; it returns a list with the ordered data.
```
drag.success = function (data) {}
```
Each element has its own options, and this method takes these options, which include: edit and delete.
```
drag.actions = function (data) {}
```
This method takes a numeric ID as a parameter.
```
drag.delete(8);
```
It returns a list of the current state of the tree.
```
drag.getOrder()
```