Is it possible to drag&drop sl-tree-items within the tree ?

[XorTdsc]

I want to drag&drop sl-tree-items within its sl-tree. Depending on which sl-tree-items are being dragged only certain other sl-tree-items should be permitted as drop-targets. It would also be nice if multiple (selected) sl-tree-items could be dragged at once.
Is any of this already possible ? I didn't see it in the docs.
Thank you. :)

[claviska]

This isn't something we've tried to do yet. I'm sure it's possible, but it would probably require a separate drag & drop utility. We can make sure the component facilitates it if it doesn't already.

Since the tree items are user-provided, things may just work as-is. If you give it a go, please report back!

[XorTdsc]

so it seems like setting the draggable="true" property on the sl-tree-item element allows it to be visually dragged around, but unfortunately i receive no ondragstart, ondragover and ondrop events :'(
https://codepen.io/xortdsc/pen/mdQMJQG?editors=1000

[claviska]

I'm not sure what syntax these handlers are supposed to be:

<sl-tree>
  <sl-tree-item
                draggable="true"
                (ondragstart)="console.log('ondragstart')"
                (ondragover)="console.log('ondragover')"
                (ondrop)="console.log('ondrop')">
    Item 1
  </sl-tree-item>
  <sl-tree-item
                draggable="true"
                (ondragstart)="console.log('ondragstart')"
                (ondragover)="console.log('ondragover')"
                (ondrop)="console.log('ondrop')">
    Item 2
  </sl-tree-item>
</sl-tree>

But adding the listeners like this will log them to the console.

const items = document.querySelectorAll('sl-tree-item');

items.forEach(item => {
  item.addEventListener('dragstart', event => console.log(item, event));
  item.addEventListener('dragover', event => console.log(item, event));
  item.addEventListener('drop', event => console.log(item, event));
});

It looks like the closing > bracket is missing on the tree items. Hopefully this helps!

[XorTdsc]

ah, so the problem seems to be that the event isn't called ondragstart but rather dragstart. i'm new to all this and i found a (seemingly wrong) tutorial here: https://www.w3schools.com/html/html5_draganddrop.asp
using the events without the "on" in the beginning seems to work fine. thank you very much for the hint. 🙏