Changing draggable handler from whole card to a specific button on the card like I did in my custom Kanban.

[parag sharma]

I want to replace my custom kanban with the KanbanComponent offered by Syncfusion. In my custom Kanban component, I am using react-beautiful-dnd for implementing drag functionality. The react-beautiful-dnd library provides "dragHandleProps" which allows us to choose an element from a card, through which we can move that card. That element can be the whole card itself, or an icon, or anything one can imagine. 

The problem is that while using KanbanComponent offered by Syncfusion, the whole card by default acts as a draggableHandler. So my question is there any way where I change the draggableHandler from a whole card to an element on that card?

[Gunasekar Kuppusamy]

Hi Parag,

Greetings from Syncfusion support.

By default, Draggable functionality will work on the entire card elements in the Kanban.But you can prevent this drag and drop behavior by setting allowDragAndDrag property as false.

API: https://ej2.syncfusion.com/react/documentation/api/kanban/#allowdraganddrop

As you previously mentioned, you can now use the custom react-beautiful-dnd library for Draggable functionality. The draggableHandler from a whole card to an element on that card can be done after allowDragAndDrag API changes.

To refresh the Kanban UI, you should update the dropped card details in the updateCard public function.

For more information about drag and drop, refer the documentation below.

https://ej2.syncfusion.com/react/documentation/kanban/drag-and-drop/#internal-drag-and-drop

Regards,

Gunasekar