Drag and Drop From List

extrao

Beginning to use the dragdrop feature for the first time. I'm using a List as the source. Thing
is when I set the list property dragEnabled to true - a square white box appears on each item in the list. Setting the dragEnabled property to false, the boxes immediately disappear.

This is appearing with or without a custom itemrenderer - it's like a thumb tack that's added.

How do I turn this off or hide this?

joshtynjala

DefaultListItemRenderer has a dragIcon style that may be getting set by your theme. This icon appears when the List's dragEnabled property is set to true. If you set it to null, it should not be displayed.

For custom item renderers, there shouldn't be anything added by the list or the theme — unless your custom item renderer is a subclass of DefaultListItemRenderer. Obviously, in that case, it would inherit styles from its superclass.

extrao

Thank you! I've tried setting dragIcon = null in my custom itemrenderer (which does extend DefaultListItemRenderer) -- but to no avail. However, overriding setListItemRendererStyles() - in my extended Theme did the job.

I'm extending TopcoatLightMobileTheme - so I referred to:
BaseTopcoatLightMobileTheme

However, if I set dragIcon to null, I can't actually scroll the list, the items are immediately dragged as soon as the list item is touched. Rather than setting to null, setting the alpha of the dragIcon to 0.1 - hides it, and still offers scrolling.

joshtynjala

extrao However, if I set dragIcon to null, I can't actually scroll the list, the items are immediately dragged as soon as the list item is touched.

That's the tricky part of drag and drop on a touchscreen, and it's the reason why the dragIcon exists. Normally, you touch and drag your finger to scroll a list, but if you want to enable the user to re-order items with drag and drop, that also needs to use the same touch and drag gesture. How do you differentiate between the user's intent to scroll and the user's intent to re-order the items? Well, I basically copied the way that iOS does it. The drag icon is meant to provide a region of the item renderer that can be touched to start re-ordering items with drag and drop, while still allowing the rest of the item renderer to be dragged to scroll the list.

With all that in mind, setting it to null is probably not a good option. However, you can certainly change the appearance of the drag icon, if you simply don't like the way that it looks. It can be any type of Starling DisplayObject.

extrao

After setting to null, and playing with it, I can appreciate the work that went into replicating the iOS functionality for proper drag - really, just spot on.

My rendererer displays horizontal thumbnails - upon drag the thumbnail detaches perfectly already, so being able to hide the dragIcon is excellent.

The fact that the dragIcon can be any DisplayObject though, again just spot on.