How to style UI Toolkit listview dragging label?

UI UI Toolkit
, , ,
1

When you drag a list item in UIToolkit, a label that follows the mouse cursor pops up:

image
image457×118 14.6 KB

I’m wondering if there’s a specific way you are supposed to style this in code, because in the UI Toolkit debugger it just shows up as a plain label with no name or specific class (Ideally it would have one of those two and I could add them to a style sheet). It gets added when you start dragging, and is removed as soon as you stop dragging:

image
image940×145 19.7 KB

Right now I’m just goint to do a ‘> Label’ selector, but this doesn’t seem ideal as it might also style other labels that get added dynamically to the main container. I tried looking through the scripting docs to see if there was a way to add styles/a class through code, but couldn’t find anything.

I’m also using App-UI in my project, so if it’s possible to do this with some App-UI elements I’ll do that.

2

I’m also wondering if there is a way to make the ‘drop area’ bigger. Right now you have to be very precise about where you drop to actually reorder a list item item (indicated by the little blue line that appears between list items). It’s not too bad if the list items are thin and you are using a mouse, but I have another app that runs on mobile and has much bigger list item elements, and it’s really hard to reorder elements.

3

I’ve been struggling just the same problem recently.
While dragged element (label itself on ListView) can be achieved on ListView.setupDragAndDrop, this is not dragged label on the pointer.

I hope the dragged label has specific style class or ListView provides the way to access to it!

4

I was never able to find a way to do this, and along with a bunch of other issues/bugs with reorderable list views (mostly for mobile), I ended up just setting the reorderable property to false on the lists, and using custom buttons to move elements up and down.

I haven’t checked to see if they’ve addressed any of the issues, including being able to select and style the drag label, but probably not.

5

Thanks for your reply!
Although my point is similar to yours, I did post this as feedback!

I need to assign a sprite to label’s back-ground on setupDragAndDrop callback.
But I can’t, so I use an image element with absolute position in stead of dragged label.

I haven’t tested my UI on mobile yet… Reordering bugs are so horrible! :scream: