我正在新的Gutenberg编辑器体验中开发一些自定义块，我很难理解如何使用一些内置组件，主要是可拖动组件。

我想要实现的是一个项目列表（比如很多li 在a中ul) 我希望它们可以通过拖放功能订购；拖放功能。

这是我的代码：

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

import \'./style.scss\';
import \'./editor.scss\';

registerBlockType( \'namespace/my-custom-block\', 
{
    title: __( \'Custom block\', \'namespace\'),
    description: __( \'Description of the custom block\', \'namespace\' ),
    category: \'common\',
    icon: \'clipboard\',
    keywords: [
    __( \'list\', \'namespace\' ),
    __( \'item\', \'namespace\' ),
    __( \'order\', \'namespace\' )
    ],
    supports: {
    html: false,
    multiple: false,
    },
    attributes: {
        items: {
            type: \'array\',
            default: [ \'One\' ,\'Two\' ,\'Tree\' ,\'Four\' ,\'Five\' ,\'Six\' ,\'Seven\' ,\'Eight\' ,\'Nine\' ,\'Ten\' ]
        }
    },
    edit: props => {
    return (
        <ul>
        { props.attributes.items.map( (itemLabel, id) => (
            <li id={ `li_${id}` } draggable>
            <Draggable
                elementId={ `li_${id}` }
                transferData={ {} }>
                {
                ({ onDraggableStart, onDraggableEnd }) => (
                    <Dashicon
                    icon="move"
                    onDragStart={ onDraggableStart }
                    onDragEnd={ onDraggableEnd }
                    draggable
                    />
                )
                }
            </Draggable>
            { itemLabel }
            </li>
        ))
        }
        </ul>
    )
    },
    save: () => {
    // Return null to be rendered on the server
    return null;
    }
}
)

在后端，它被正确渲染，但项目不可拖动

遗憾的是，《古腾堡开发人员手册》没有提供太多信息https://wordpress.org/gutenberg/handbook/designers-developers/developers/components/draggable/ 我不知道该怎么做。

谢谢，干杯