Dragndrop_svelte

Drag n Drop (svelte)

A minimalistic project containing what I consider the essentials of a drag and drop component.

Features:

• Nestable
• Types
• Handles
• Custom components

First, import the three files in ./src/lib to your project. Then, use the simple object hierarchy to build an initial state.

let items: DragNodeList = [
        {
            id: 1,
            name: "Item 1",
            itemComponent: ItemComponent,
        },
        {
            id: 2,
            name: "Item 2",
            parentable: true,
            itemComponent: ItemComponent,
            items: [
                {
                    id: 41,
                    name: "item41",
                    parentable: true,
                    itemComponent: ItemComponent,
                },
                { id: 42, name: "item42", itemComponent: ItemComponent },
                { id: 43, name: "item43", itemComponent: ItemComponent },
            ],
        },
        {
            id: 3,
            name: "Item 3",
            itemComponent: ItemComponent,
        },
    ];

... and plop this down somewhere in your project

<DragBox bind:items={items} />

As you can see, an item only requires three properties: a unique id, a name, and a component.

One optional property is "parentable." This allows the node to be a parent. If this is true then the node will render nested nodes.

If the node should have a default list of items, pass that to an items property.

Additionally, the property "type: string" can be applied to a parentable node. This means children of that node can only be dragged to parents with the same type.

Thanks To...

Svelte DND Action