Fix ng2-dnd issues on Android and IOS devices

[akserg]

Seems, there issues with TouchEvent in Angular2.

[mburger81]

The problem is, the TouchEvents are fired well as expected but there is no VISUAL drag and drop. I think we have to launch manually the dragstart event or something like that. Do you know, is there are possibility to start dragging manually? If you must manage the dragging with a canvas and check if the canvas is before after or over a other drag enbaled object it would heavier to resolve this problem? What do you think?

[akserg]

Possible solution - use the following shim in your project: https://github.com/timruffles/ios-html5-drag-drop-shim Can you check does it work for you?

[mburger81]

Hey Sergey,

should it not possible to dispatch a DragEvent doing something like that?

var dragEvent:DragEvent = document.createEvent('DragEvent'); dragEvent.initDragEvent("dragstart", touchEvent.bubbles, touchEvent.cancelable, touchEvent.view, touchEvent.detail, this.laDraggableService.touchStartX, this.laDraggableService.touchStartY, this.laDraggableService.touchStartX, // this.laDraggableService.touchStartY, // touchEvent.ctrlKey, touchEvent.altKey, touchEvent.shiftKey, touchEvent.metaKey, 0, touchEvent.target, new DataTransfer()); this.elemRef.nativeElement.dispatchEvent(dragEvent:DragEvent);

like this? //var textEvent = document.createEvent('TextEvent'); //textEvent.initTextEvent('textInput', true, true, null, '\0', 9, "en-US"); //this.elemRef.nativeElement.dispatchEvent(textEvent);

For now this is not working for me ... but I'm working on it, what do you think?

2016-04-18 7:42 GMT+02:00 Sergey Akopkokhyants notifications@github.com:

Possible solution - use the following shim in your project: https://github.com/timruffles/ios-html5-drag-drop-shim Can you check does it work for you?

— You are receiving this because you commented. Reply to this email directly or view it on GitHub https://github.com/akserg/ng2-dnd/issues/9#issuecomment-211213166

[akserg]

Seems you try to initialise DragEvent with TouchEvent properties. I don't think it is possible. The question to you - did you check this shim. Does it work for you? If it does - I can incorporate it inside ng2-dnd with improvements.

[mburger81]

No I didn't check it, I'am not so happy to use an other external LIB in JS to resolve it. I don't know if it there is a possibility to get it work, but in my opinion it should work natively in angular2. If I have to inlcude an external JS I can also include JQUERY UI and anything works great there.

But I will test no the shim.

p.s. I never dispatch an Event on javascript or angular2 so I'm not sure what there is to do. I controlled the DragEvent on Desktop and the TouchEvent on mobile and there are al properties I need exptect then TARGET and DataTransfer.

I get this error EXCEPTION: TypeError: dragEvent.initDragEvent is not a function

2016-04-18 11:54 GMT+02:00 Sergey Akopkokhyants notifications@github.com:

Seems you try to initialise DragEvent with TouchEvent properties. I don't think it is possible. The question to you - did you check this shim. Does it work for you? If it does - I can incorporate it inside ng2-dnd with improvements.

— You are receiving this because you commented. Reply to this email directly or view it on GitHub https://github.com/akserg/ng2-dnd/issues/9#issuecomment-211304735

[akserg]

I think those resources could help you to realise you ideas:

• https://mobiforge.com/design-development/touch-friendly-drag-and-drop
• http://mobiforge.com/design-development/html5-mobile-web-touch-events

I spent the rest of Sunday to made it works but I didn't finish incorporation yet. Will continue on this week.

[mburger81]

To make it works with the shime code or nativley?

2016-04-18 12:16 GMT+02:00 Sergey Akopkokhyants notifications@github.com:

I think those resources could help you to realise you ideas:

• https://mobiforge.com/design-development/touch-friendly-drag-and-drop
• http://mobiforge.com/design-development/html5-mobile-web-touch-events

I spent the rest of Sunday to made it works but I didn't finish incorporation yet. Will continue on this week.

— You are receiving this because you commented. Reply to this email directly or view it on GitHub https://github.com/akserg/ng2-dnd/issues/9#issuecomment-211313149

[mburger81]

ios-drag-drop.js works but in a very bad way.

The two links you send me I found weeks ago and I tried to implement the normal JS solution natively in angular2 but I stopped on the first problem. I was not able to copy my DIV element and attache it somewhere in the DOM. We are new on angular so there are sometimes howto problems for us. :|

2016-04-18 12:19 GMT+02:00 Michael Burger michi.burger@gmail.com:

To make it works with the shime code or nativley?

2016-04-18 12:16 GMT+02:00 Sergey Akopkokhyants notifications@github.com :

I think those resources could help you to realise you ideas:

- https://mobiforge.com/design-development/touch-friendly-drag-and-drop

http://mobiforge.com/design-development/html5-mobile-web-touch-events

I spent the rest of Sunday to made it works but I didn't finish incorporation yet. Will continue on this week.

— You are receiving this because you commented. Reply to this email directly or view it on GitHub https://github.com/akserg/ng2-dnd/issues/9#issuecomment-211313149

[mburger81]

I was able to create a new Click Event with DOM Adapter and dispatch the event for my element.

But I found no way to initDragEvent ....

2016-04-18 12:46 GMT+02:00 Michael Burger michi.burger@gmail.com:

ios-drag-drop.js works but in a very bad way.

The two links you send me I found weeks ago and I tried to implement the normal JS solution natively in angular2 but I stopped on the first problem. I was not able to copy my DIV element and attache it somewhere in the DOM. We are new on angular so there are sometimes howto problems for us. :|

2016-04-18 12:19 GMT+02:00 Michael Burger michi.burger@gmail.com:

To make it works with the shime code or nativley?

2016-04-18 12:16 GMT+02:00 Sergey Akopkokhyants <notifications@github.com

:

I think those resources could help you to realise you ideas:

- https://mobiforge.com/design-development/touch-friendly-drag-and-drop

http://mobiforge.com/design-development/html5-mobile-web-touch-events

I spent the rest of Sunday to made it works but I didn't finish incorporation yet. Will continue on this week.

— You are receiving this because you commented. Reply to this email directly or view it on GitHub https://github.com/akserg/ng2-dnd/issues/9#issuecomment-211313149

[magiccrafter]

I am not able to make any drag-n-drop features to work on any browsers for mobile devices. Is there any plan fixing that issue or the lib is created for desktop purposes only ?

[akserg]

It is not for desktop purposes only, and I will accommodate it for mobiles as well, but a bit later, when to fix all issues.

[Sharique-Hasan]

@akserg When can you fix this issue. I think this is a long due bug since April.

[svcninja]

@akserg Tried https://github.com/timruffles/ios-html5-drag-drop-shim, neither ios nor android works.

[mburger81]

Hi, @akserg did you evere implement drag&drop for mobile touch events?

[PierreDugue]

Hi @akserg, do you plan to implement dnd for mobile?

[rgiosa]

Hi guys,

As a workaround, i am using https://github.com/timruffles/ios-html5-drag-drop-shim

npm install --save drag-drop-webkit-mobile

Then, in .angular-cli.json

"scripts": [ "../node_modules/drag-drop-webkit-mobile/ios-drag-drop.js" ],

I can't figure out how to configure this library inside my SharedModule, so in index.html

<script> var iosDragDropShim = { requireExplicitDraggable: true } </script>

And bingo! Drag and Drop is now working. Some bugs are popping up for me, but it's not breaking the app.

[matte00]

For Android devices you can use this workaround.

.yourDivName{ touch-action: none; }

See here credits @PierreDugue

Unfortunately iOS doesn't support touch-action property :-/

[mrkvon]

I made the touch behaviour work with mobile-drag-drop (which is a rewrite of ios-html5-drag-drop-shim mentioned above). (Is working in emulator . Gonna test on an android device in the morning and on a random android device. Still waiting for feedback from ios).

Angular project created with @angular/cli. Webpack.

Setup:

npm install --save 'mobile-drag-drop'

in your ./src/styles.(s)css add

@import "~mobile-drag-drop/default.css";

in your ./src/app/[drag-test].component/[drag-test].component.ts add

// imports
import { polyfill } from 'mobile-drag-drop';
...
@Component(...)
export class DragTestComponent implements OnInit {
  ...
  // constructor
  constructor() {
    polyfill({}); // options can be added, see the library doc
  }
  ...
  // prevent default on some drag events on dnd-droppable (important!)
  public preventDefault(event) {
    event.mouseEvent.preventDefault();
    return false;
  }
}

In path/to/[drag-test].component.html execute the above preventDefault($event) on elements with dnd-droppable directive:

<div dnd-droppable
  (onDragEnter)="preventDefault($event)"
  (onDragOver)="preventDefault($event)"
  (onDragLeave)="preventDefault($event)">draggables can be dropped here</div>

Does it make sense?

[mburger81]

@akserg did you ever go ahead on this problem?

[akserg]

Hi there,

I will have a look.

On 8 February 2018 at 17:31, mburger81 notifications@github.com wrote:

@akserg https://github.com/akserg did you ever go ahead on this problem?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/akserg/ng2-dnd/issues/9#issuecomment-364147972, or mute the thread https://github.com/notifications/unsubscribe-auth/ABVeWcWQP4h1KND5nvxVkdESjGE0sNhmks5tSxM9gaJpZM4H-zug .

[mburger81]

@akserg looking to your AbstractComponent it seems you are using native drag&drop right?

Most drag&drop libraries append a cloned node to body and don't use browsers drag and drop, in this way you can use also touch events and do the same as you do on browser. But this could bring several problems, like style or performance problems!

Using hammerjs for touch events is nothing special, we use it already in our ionic projects. So do you think you can listen for touch events and simulate native browser dragging? We tried do implement this in several ways but we wasn't able to do this, and we think this is impossible.

[rafaelcgdf]

Any news about mobile support? I didn't manage to get the workarounds to work for me.

[mburger81]

@akserg perhapse we can help you in some way?

[tommykamkcm]

hello everyone @mburger81, i spent half a day try to implement @mrkvon 's solution to my Angular 2 app. It worked but the mobile-drag-drop plugin omit the click event on all the buttons of the page.

The good news is eventually i could find another library that does the hard work. Check out https://github.com/SortableJS/angular-sortablejs

To get it working on Angular 2 app, please install angular-sortablejs 2.1.0 + sortablejs 1.6.0 (I spent another hour finding this answer....) For Angular 4 app, just follow documentation

[avazmx]

@mrkvon made perfect sense and it worked perfectly! just to add a little detail, don't forget to add 'touch-action: none' on the div you are using to prevent the scroll from working while dragging!

[andrea-spotsoftware]

@mrkvon it works in a normal configuration! The only one problem is that is not working if you use a drag handle