Hi to all,
we created a github repo where you can test and emulate all the issues we are talking about in this thread.
clone this https://github.com/mburger81/ionic-3-drag-bugs to reproduce the issues:
Mainly we have three issues or help request to report here:
a) removeChild on DOM is not working if we import NoopAnimationsModule in app.module.ts
b) Emit an Event from domCrtl.write is not emitted at all or if it is emitted the change detection is not working, until something else in DOM is changed, it seems it is running out of angular zone
c) set HAMMER.DIRECTION_ALL on mobile devices does not work
She app is very simple we add in home.html a new button which is the element we drag and an ion-fab button which should shown only if we drag the first button, if we drop the button it should hide again.
<button ion-button primary
la-draggable
[dragData]="123456"
[dropZones]="['deleteWidgetFromDashboard']"
(onDragStart)="onDragStart($event)"
(onDragEnd)="onDragEnd($event)">
DRAG ME
</button>
<ion-fab right bottom
*ngIf="isDragging"
la-droppable
[dropZones]="['deleteWidgetFromDashboard']"
(onDragEnter)="onDragEnter($event)"
(onDragLeave)="onDragLeave($event)"
(onDrop)="onDrop($event)">
<button ion-fab color="danger"><ion-icon name="trash"></ion-icon></button>
</ion-fab>
It looks like that
Our drag&Drop directive is LaDraggableDirectiveective,
If you drag the DRAG ME button you can see the fab button with the recycle bin, but now if you leave the drag with out moving the mouse, you can see the DRAG ME button is not removed and the fab button is still there, now at this point if you move the mouse the button is removed and the fab button hided, as requested.
a) In the drag directive you can see this piece of code for removing the previous attached dupplicated dom element:
this.domCrtl.write(() => {
this.renderer.removeChild(this.mirror.parentElement, this.dragElement);
// this.renderer.removeChild(this.srcElement.parentElement, this.dragElement);
this.renderer.removeClass(this.srcElement, 'la-draggable-transit');
});
The strange thing is, if you do not load NoopAnimationsModule the DOM element is removed immediatly but if you have loaded this module (which we need for material2) the DOM element is removed only if you move also the mouse. Why that? Some ideas?
b) in the directive we have a function panStop where we emit the onDragEnd event, this panStop function is called from a domCrtl.write in onPanEnd function. So if we emit this event the home.ts component is not rendered well, we have wrap the property change into zone.run, have a look in home.ts for it, uncomment this.zone.run or comment domCrtl.write in the directive and the bug is gone away.
c) we try to simulate a drag&Drop, after a long press event with HAMMER we would like to enable PAN event, which is working well. But as you know in Ionic per default we can pan an element only vertically or horizontally. So we try to set HAMMER manually to allow both directions, like described in this article: https://www.joshmorony.com/building-an-absolute-drag-directive-in-ionic-2/
On browser this is working well, but this is not working on MOBILE devices. On mobile device you have to do firstly a horizontally pan before the vertically pan is enabled.
Can someone help on this 3 bugs?