Site icon Hip-Hop Website Design and Development

Draggable merchandise in {custom} gutenberg block

I am creating some {custom} blocks within the new Gutenberg editor expertise, and I am wrestle to grasp the best way to use some build-in elements, principally the Draggable elements.

What I wish to obtain is an inventory of things (as an instance many li in a ul) and I need them to be orderable with a drag & drop function.

Right here is my code:

import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { Draggable, Dashicon } from '@wordpress/elements';

import './model.scss';
import './editor.scss';

registerBlockType( 'namespace/my-custom-block', 
{
    title: __( 'Customized block', 'namespace'),
    description: __( 'Description of the {custom} block', 'namespace' ),
    class: 'frequent',
    icon: 'clipboard',
    key phrases: [
    __( 'list', 'namespace' ),
    __( 'item', 'namespace' ),
    __( 'order', 'namespace' )
    ],
    helps: {
    html: false,
    a number of: false,
    },
    attributes: {
        objects: {
            kind: 'array',
            default: [ 'One' ,'Two' ,'Tree' ,'Four' ,'Five' ,'Six' ,'Seven' ,'Eight' ,'Nine' ,'Ten' ]
        }
    },
    edit: props => {
    return (
        <ul>
        { props.attributes.objects.map( (itemLabel, id) => (
            <li id={ `li_${id}` } draggable>
            <Draggable
                elementId={ `li_${id}` }
                transferData={ {} }>
                {
                ({ onDraggableStart, onDraggableEnd }) => (
                    <Dashicon
                    icon="transfer"
                    onDragStart={ onDraggableStart }
                    onDragEnd={ onDraggableEnd }
                    draggable
                    />
                )
                }
            </Draggable>
            { itemLabel }
            </li>
        ))
        }
        </ul>
    )
    },
    save: () => {
    // Return null to be rendered on the server
    return null;
    }
}
)

On the backend aspect it’s appropriately rendered however the objects aren’t draggable

Sadly the gutenberg developer handbook would not give a lot data
https://wordpress.org/gutenberg/handbook/designers-developers/builders/elements/draggable/ and I am not seeing how ought to I do it.

Thanks and cheers