Angular-tree-component: DnD on mobile

[denkomanceski]

Are there any ideas or workarounds how to make the drag and drop possible on mobile devices (touch) ? Regards

[adamkleingit]

I'll need to switch to
https://github.com/valor-software/ng2-dragula
instead of HTML5 native dnd

[romanovma]

Any update on this? Thanks :)

[adamkleingit]

Hi,
haven't done so yet, there's a backlog of more important issues at the moment.
Do you have time to make a pull request on this?

[romanovma]

Doesn't look a s a quick fix for me so probably won't have time at least next 1-2 months sadly.

[devmiin]

Try to switch to https://github.com/SortableJS/angular-sortablejs
for demo http://codepen.io/miiny/pen/ryGBjv

[romanovma]

@adamkleingit looks like ng2-dragula is not so good in mobile so we'll try to implement with angular-sortablejs. Please let us know if you have any hints/concerns against the latter so we don't waste our time :) thanks

[adamkleingit]

Does it support dragging over, or only re-ordering?

[romanovma]

Hmm, looks like it supports reordering only.

[adamkleingit]

@romanovma maybe we can open an issue to dragula to support mobile? I tried their demo and looks like the problem on mobile is that it doesn't prevent scrolling while dragging.

[altschuler]

https://github.com/akserg/ng2-dnd might also be worth a look

[vikram-raj]

@altschuler ng2-dnd also not have touch support.

[altschuler]

Good point. I'm actually using dragula in production at the moment. It's not perfect, but it's decent. I included the Touch Punch lib which seemed to help a lot. It's a jQuery UI thing, which we had in the project anyway, so might not be very easy to figure why it works :slightly_smiling_face:

[vikram-raj]

@altschuler we are not using jQuery in our project so we can not use Touch Punch lib :(. So, any other alternative? if you know.

[Gillardo]

Any news on this??

[adamkleingit]

Relates to #174

[Hesesses]

Damn, we built quite large system around this tree component and now we found out that it doesnt work on mobile... 🙈

Do you have plans to make this work on mobile also? (in the next 1-2 months)

[Gillardo]

+1 to mobile support... else we will have to migrate away from this component which I ideally don't want to do as it is a nice component.

[adamkleingit]

@Hesesses , @Gillardo sorry to hear you already implemented it inside the system and discovered this afterwards. As a first step I will add a disclaimer in the readme that DnD doesn't work on mobile. Is there anything else that you found that doesn't work on mobile?

Originally I did not plan to implement it in the coming 1-2 months, but please email me at [email protected] and we'll see if we can work out a solution. I don't know any other solutions that allow DnD on mobile and all other features this component offers.

[altschuler]

@adamkleingit Is there anything we can do to help? If you've begun work on it, can we support that somehow? Or would you be able to give some hints as to what has to be done where :-)

[adamkleingit]

@altschuler thanks for offering to help!
I think the best would be to make an implementation using mouse / touch events - so mouse down, mouse leave, mouse move etc.
It seems to be the easiest most straightforward way to support drag on all platforms.
Also, it probably makes sense to allow to override the dragged element style / template.

If you guys want to handle it send me an email and we can discuss a more detailed design.

[HATyCEHKA]

Why it is closed? DnD is implemented on mobile now or not?
I tried example in docs, but it is not working on my mobile device

[ghost]

I prefer to keep enhancement requests closed to allow me to better support bugs and issues

[bailejl]

@adamkleingit I am interested in adding mobile drag and drop to this component, as I need it for a project I am building. Any thoughts or suggestions?

[bailejl]

@adamkleingit Based on some research, I found three options. First, is one you mentioned, ng2-dragula. This seems like it will impact the code base a lot. Second option, is to add touch events to the code in line with the mouse events. This would be less impact compared to ng2-dragula. The third options is to use a polyfill like DragDropTouch. This converts touch events to drag events, if the target or a parent has the draggable attribute. This would be the least amount of impact to the code. Here is a link to DragDropTouch. https://github.com/Bernardo-Castilho/dragdroptouch

[bailejl]

@adamkleingit I was able to use the DragDropTouch on an iPad to drag-n-drop with no issues. As long as the code has the draggable attribute set, it will work. There is no need to modify the code. I will add documentation to the doc site under drag & drop. https://angular2-tree.readme.io/docs/drag-drop

[adamkleingit]

That sounds great. Are you going to make a pull request to the Readme?
Actually I prefer to do it on the readme.io website, so maybe just paste
the instructions here, or reproduce it in a plunkr, and I will make sure to
add it to the docs as a temporary bypass?
I think that still working out a solution inside the library's code is the
best option. I'll take a look in dragDropTouch source code

On Fri, Mar 23, 2018 at 5:42 AM, Joe Bailey [e-mail]
wrote:

@adamkleingit https://github.com/adamkleingit I was able to use the
DragDropTouch on an iPad to drag-n-drop with no issues. As long as the code
has the draggable attribute set, it will work. There is no need to modify
the code. I will add documentation to the Readme file on how to use it.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/500tech/angular-tree-component/issues/65#issuecomment-375524542,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA2SSpt6ZBs0khT4SaqOp7vsgpW4urjPks5thGECgaJpZM4KOSal
.

[adamkleingit]

@bailejl I just added it to the example, and unfortunately it only helps to drag the leaf nodes. For some reason, it doesn't work on parent nodes.

[bailejl]

@adamkleingit The application I used it on only allows certain leaf nodes to move, so I could not test parent nodes. I will take a look into why parent nodes will not move.

[bailejl]

@adamkleingit I was able to enable move for leaf and non-leaf items and it worked in Safari on an iPad. My tree structure is as follows:
-Root
-- Diagram #1
--- Item
---- Group
----- item
----- item
-- Diagram #2
--- Item
---- Group
----- Item

Items and groups can move with a diagram, but not across diagrams. Also, groups can contain groups and items. I am able to move a group around within a diagram.

It might have to do with the difference(s) in what we tested with and on.

As for your question on a temp bypass, I agree, unless this solution proves robust enough. However, it appears that may not be the case.

If you are still interested in it, I can put some documentation together.

[ghost]

What did you do to make it work?
I simply downloaded DragDropTouch.js and then imported it from the
polyfills file.

On Sat, Mar 24, 2018 at 11:07 PM, Joe Bailey [e-mail]
wrote:

@adamkleingit https://github.com/adamkleingit I was able to enable move
for leaf and non-leaf items and it worked in Safari on an iPad. My tree
structure is as follows:
Root

• Diagram #1
  https://github.com/500tech/angular-tree-component/issues/1
  -- Item
  --- Group
  ---- item
  ---- item
• Diagram #2 https://github.com/500tech/angular-tree-component/pull/2
  -- Item
  --- Group
  ---- Item

Items and groups can move with a diagram, but not across diagrams. Also,
groups can contain groups and items. I am able to move a group around
within a diagram.

It might have to do with the difference(s) in what we tested with and on.

As for your question on a temp bypass, I agree, unless this solution
proves robust enough. However, it appears that may not be the case.

If you are still interested in it, I can put some documentation together.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/500tech/angular-tree-component/issues/65#issuecomment-375921209,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACUsQ3-Ul0aBrScI0yte_VgsKK1BCMP8ks5thqdwgaJpZM4KOSal
.

--

Adam Klein
Chief Technology Officer

Tel. [phone] <[phone]>
Web 500tech.com http://www.500tech.com/ | github.com/500tech |
@adamklein500
http://twitter.com/adamklein500

[bailejl]

I downloaded a copy and put in the project. Then added a script element to the head section of the index.hmtl file of my angular project. That is all it took.

[adamkleingit]

So it's similar, but I think it's better to import it from polyfills.ts -
this way it's bundled together.
Anyway - the documentation is in readme.io, so I will update it directly
there, there is no point in a PR.
Thanks for the help!

On Sun, Mar 25, 2018 at 7:50 AM, Joe Bailey [e-mail]
wrote:

I downloaded a copy and put in the project. Then added a script element to
the head section of the index.hmtl file of my angular project. That is all
it took.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/500tech/angular-tree-component/issues/65#issuecomment-375945440,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA2SSmHhGB7G8OAJc3vacZmT7Jy0rfvUks5thyIngaJpZM4KOSal
.

[hath74]

So if we want to import this into polyfills.ts what does that look like? I'm currently running angular 5 so in polyfills.ts it would be import 'what?'. I scoured the googleverse looking for an answer to this but came up blank.

[bailejl]

@hath74 For our project, I added it to a script tag in the head of my HTML page. This did the trick for me.