结合html5sortable和golden-layout

Question

我正在尝试将html5sortable与golden-layout结合使用，但不幸的是html5sortable无法正常工作。当我在与html5sortable相关的代码下运行时，它可以单独正常运行。

   <div class="p3 clearfix bg-yellow maroon">
        <div class="col col-12 mb1">
        <h2 class="h3 m0">Sortable Copy</h2>
        </div>
            <h2 class="h4 mt1">Copy items here</h2>
            <ul class="p2 border maroon border-maroon js-sortable-copy-target sortable list flex flex-column list-reset" aria-dropeffect="move">
            </ul>
    </div>
        <div class="col col-6">
            <ul class="ml4 js-sortable-copy sortable list flex flex-column list-reset" aria-dropeffect="move">
                <li class="p1 mb1 yellow bg-maroon" style="position: relative; z-index: 10" draggable="true" role="option" aria-grabbed="false">Item 1</li>
                <li class="p1 mb1 yellow bg-maroon" style="position: relative; z-index: 10" draggable="true" role="option" aria-grabbed="false">Item 2</li>
             </ul>
        </div>
    </div>   

我也可以单独运行“黄金布局”，它工作正常，但是我不确定为什么不允许我拖放组件。

<script type="text/javascript"> 
        sortable('.js-sortable-copy', {
        forcePlaceholderSize: true,
        copy: true,
        acceptFrom: false,
        placeholderClass: 'mb1 bg-navy border border-yellow',
    });
    sortable('.js-sortable-copy-target', {
        forcePlaceholderSize: true,
        acceptFrom: '.js-sortable-copy,.js-sortable-copy-target',
        placeholderClass: 'mb1 border border-maroon',
    });

    var config = {"settings": {
                                "popoutWholeStack": true,
                            },
                            content: [{
                                type: 'row',
                                content:[{
                                    type: 'component',
                                    componentName: 'Toolbox'
                                }]
                            }]
                        };

var myLayout = new GoldenLayout( config );

function getTable() {
    return  '<div> <div class="p3 clearfix bg-yellow maroon">' +
            '   <div class="col col-12 mb1">' +
            '       <h2 class="h3 m0">Sortable Copy</h2>' +
            '   </div>' +
            '   <h2 class="h4 mt1">Copy items here</h2>' +
            '   <ul class="p2 border maroon border-maroon js-sortable-copy-target sortable list flex flex-column list-reset" aria-dropeffect="move">' +
            '   </ul>' +
            '</div>' +
            '<div class="col col-6">' +
            '   <ul class="ml4 js-sortable-copy sortable list flex flex-column list-reset" aria-dropeffect="move">' +
            '       <li class="p1 mb1 yellow bg-maroon" style="position: relative; z-index: 10" draggable="true" role="option" aria-grabbed="false">Item 1</li>' +
            '       <li class="p1 mb1 yellow bg-maroon" style="position: relative; z-index: 10" draggable="true" role="option" aria-grabbed="false">Item 2</li>' +
            '   </ul>' +
            '</div>' +
        '</div>';
}

myLayout.registerComponent( 'Toolbox', function( container, componentState ){
container.getElement().append(getTable());                              
});

myLayout.init();
</script>

我错过了什么吗？