Drag-drop/clicks don't work with nested components

[aandis]

Description If the item inside {{#item.handle}} or {{#group.item}} is an ember component, this addon has some serious issues. I'll outline a few of them -

1. Each item can only be dragged once.
2. On mobile devices, the drag and drop doesn't work at all.
3. Any touch events/button clicks don't work on mobile devices

To Reproduce

1. Go to twiddle.
2. The twiddle uses 2.1.1 version of the addon but these issues exist in earlier versions as well. We use 1.12.3 and here's a twiddle on that version which has similar issues.
3. To try it on mobile devices, you can easily simulate mobile devices on Chrome or open it up on a real mobile device. I've tested on both.

Expected behavior

1. Drag and drop should work normally on desktop for nested components.
2. Drag and drop should work normally on mobile devices.
3. Button clicks and other touch events should work on mobile devices.

[ygongdev]

@aandis thanks for the report.

1. There is an existing issue with some usages where it requires you to supply the transition animation in order to trigger the transitionend logic that the addon depends on.
2. In your reorderItems action, you need to explicitly set the new order or the UI will not be updated.
3. Seems like button click is indeed not working on mobile, can you please file a separate issue for this if the first 2 issues are resolved? Thanks! updated twiddle

[aandis]

Thanks @ygongdev. Adding the transition styling fixed the first issue. Unfortunately, I'm still not able to drag and drop on mobile devices on my app. Works fine on the twiddle so I'm not sure whats up. Any pointers to debug this would be great.

Happy to open a separate ticket for 3rd.

[aandis]

@ygongdev also, I think it'd be helpful to others if the transition bit is documented in the readme. :)

[aandis]

Unfortunately, I'm still not able to drag and drop on mobile devices on my app. Works fine on the twiddle so I'm not sure whats up.

@ygongdev still no luck with this. The elements don't respond to any touch events altogether (even if they're not inside nested components). I'm hoping resolving #340 solves this as well.

[ygongdev]

@aandis yeah good idea, I'll probably update the readme sometime soon. I'll work on #340 when I have some free time.

[aandis]

hey @ygongdev any update on this? I'm happy to help out on this if you point me where to look.

[ygongdev]

@aandis sorry I've been pre-occupied with other tasks. I would start by looking at the sortable-item.js, and methods like _scrollOnEdges.