Drag & Drop

Question

Hi,Is there a way to drag events from a list onto some specific cells / events, user won't be able to drop onto other event cells, only cells that matches the existing id from the dragged node would allow the event to be dropped onto them, please advise. Thanks.

Vengatesh Maniraj · Answer

Hi Umair, 

Syncfusion Grettings. 

We have prepared a sample where the child item in the waiting list for the specific category can be dragged into the same category in schedule and the same can be viewed from the link below. 

Sample: https://stackblitz.com/edit/prevent-external-drag-based-on-id?file=app.component.ts  

Related UG Link: https://ej2.syncfusion.com/documentation/schedule/appointments/?no-cache=1#preventing-drag-and-drop-on-specific-targets  

Kindly try the above sample, If you have any concerns please revert us back for further assistance. 

Regards, 
  
Vengatesh

Umair Ahmed · Answer

Thanks, but how do we drop onto existing appointment cells only, for example in this sample

Sample: https://stackblitz.com/edit/prevent-external-drag-based-on-id?file=app.component.ts

lets consider the data on the drag tree represents locations, the user should be able drag and drop location onto existing appointments only if they are same category etc, for example we want to drop location "Laura" onto "Jercy" ( 9:30 - 10:30 AM) and it would auto populate the location.

Hareesh Balasubramanian · Answer

Hi Umair, 
  
Thanks for the update. 
  
We have validated your reported issue scenario at our end and it can be achieved using isSlotAvaliable property. And for your reference we have modified your sample and it can be viewed from the following link, 
  
Code snippet: 




onTreeDragStop(event: DragAndDropEventArgs): void { 
    . 
                . 
                . 
                . 
                // We check the condition to prevent the external dragging on wrong category  
                if (!isNullOrUndefined(event.draggedNodeData.parentID) && !((event.draggedNodeData.parentID === "1" && eventData.DepartmentID !== 1) || (event.draggedNodeData.parentID === "5" && eventData.DepartmentID !== 2))) { 
                                //prevent dragging 
                                event.cancel = true; 
                } else { 
                                if (!this.scheduleObj.isSlotAvailable(eventData)) { 
                                                this.scheduleObj.openEditor(eventData, 'Add', true); 
                                                this.isTreeItemDropped = true; 
                                                this.draggedItemId = event.draggedNodeData.id as string; 
                                } else { 
                                                event.cancel = true; 
                    } 
   } 
} 
  
Sample: https://stackblitz.com/edit/prevent-external-drag-based-on-id-djn565?file=app.component.ts 
  
Kindly try the above sample and if you have any other concerns please revert for further assistance. 
  
Regards, 
Hareesh