a
I'm looking for someone to help me get SortableJs working in V14. I've tried multiple different ways but I cannot seem to get the draggable part to work.
w
I have looked at it, but saw a couple folder names in the Examples folder of the repo, talking about sortable stuff. Suggest you take a look there 👀 https://github.com/umbraco/Umbraco.CMS.Backoffice/tree/main/examples
a
O.o interesting
I just looked and it doesn't do what I need, and not being a front-end developer I do not have the skills to make it work. I really just need a hand getting Sortable working
d
I have made a couple of working examples in CodePen: Sortable - 01 - HTML, CSS (Bootstrap), Vanilla JS: https://codepen.io/deanleigh/pen/mdYWbdK
Sortable - 02 - Web Component using Typescript : https://codepen.io/deanleigh/pen/LYoWYRa?editors=1010
Thanks to @Warren Buckley and his super duper V14 Package Script I was able to test in the correct environment. It seems I had to wrap my web component code in LitElement
firstUpdated()
Here is my code:
Copy code
<uui-box headline="Sortable List" style="margin:20px;">
            <ul class="list-group m-3" id="items">
                <li class="list-group-item">item 1</li>
                <li class="list-group-item">item 2</li>
                <li class="list-group-item">item 3</li>
            </ul>
            </uui-box>

firstUpdated() {
        const items = this.shadowRoot.querySelector('#items') as HTMLElement; // Cast items to HTMLElement
        if (items) {
            new Sortable(items, {
                animation: 150,
                //handle: '.list-group-item', // Not really needed in this case
            });
        }
    }
n
Hi @AaronSadlerUK Now I got the opportunity to have a closer look on this topic. So as Warren mentioned where was an example on this topic. But it was not fully working, so I got around finishing it. So you now can have as many levels of nesting as you like. And as well where the data change get propagated, that was not part of the example before. So hopefully this helps. Its in this PR for now, and you can view it by running the front-end server with examples:
npm run examples
and pick
sorter-with-nested-containers
https://github.com/umbraco/Umbraco.CMS.Backoffice/pull/2003
Need a little front end help with the HQ sorter package, currently, I can drag an item into a child container when it already contains items, but I need to be able to drag an item into an empty container. Typically this would be when dropped onto the parent it would then add it to the children underneath it. All help is much appreciated 🙂 I'm guessing it's something to do with this: https://github.com/umbraco/Umbraco.CMS.Backoffice/blob/ce85f3cc95734ef65f9842d34daf146366e6d23a/src/packages/core/sorter/sorter.controller.ts#L359 But waaaay out of my depth
s
FYI the bulk of HQ is on holiday at the moment, so don't expect to hear back before August 😅 🙈