In my Ionic 2 project, I am currently working on implementing a drag and drop feature. To achieve this, I have utilized the following event in Ionic 2:
<div (press) = "onDragInit(item, $event)"
(panstart)="dragStart($event)"
(panup)="onDrag($event)"
(pandown)="onDrag($event)"
(panend)="onDragEnd($event)"
(pressup)="pressUpEvent($event)">
</div>
The issue that arises is that the panup and pandown events do not function correctly initially.
If we perform a horizontal movement first, both events work as expected. However, if we execute a vertical movement first, neither event works until a horizontal movement is performed. Have any of you encountered this problem?
Below is an excerpt from my .ts file:
public onDragInit(doc, event): void {
if(!doc.isSelected){
return;
}
// Hide selected documents when initiating drag
this.docs.forEach( (doc: any) => {
if(doc.isSelected){
doc.dragging = true;
this.draggingDocs.push(doc);
}else{
doc.dragging = false;
}
});
this.dragPoint = this.getDragPoint(event.center.x, event.center.y);
this.docDragging = true;
this.destination = this.getDroppableDoc(event.center.x,event.center.y);
event.preventDefault()
}
public dragStart(event: any): void {
if(!this.docDragging){
return ;
}
event.preventDefault();
}
public onDrag(event: any):void {
if(!this.docDragging){
return ;
}
this.dragPoint = this.getDragPoint(event.center.x, event.center.y);
let placeForDrop = this.getDroppableCar(event.center.x, event.center.y);
if(placeForDrop != null && placeForDrop.doc != null){
this.destination = placeForDrop;
}
event.preventDefault();
}
public onDragEnd(event: any): void {
if(this.destination && this.destination.doc){
this.onDrop.emit({draggingDocs: this.draggingDocs,destination: this.destination});
}
this.cancelDragging();
event.preventDefault();
}
public pressUpEvent(event: any): void {
this.cancelDragging();
event.preventDefault();
}