Cancel Drop after async function

Hi,

In our business, our items inside a board have different dragTo boards. In this case, what’s the approach to use ? We’ve used the dropEl event to validate if user can drop using an async function but in this case, the kanban.drake.cancel(true) will not work in the callback.

Our code:

const mergedConfig = {
           ...new KanbanConfiguration(),
           ...this.configuration,
           dropEl: (el, target, source, sibling) => {
               const currentStatusId = el.getAttribute("data-boardid");
               const targetStatusId = target.parentElement.getAttribute("data-id");
              this.workflowService.getWorkflowStateTransition(currentStatusId,targetStatusId).subscribe(
                   transition => {
                        /// post to server ...............
                   },
                   error => {
                        // tried this to undo   
                       const copy = el.cloneNode(true);
                       this.kanban.addElement(currentStatusId, copy);
                       this.kanban.removeElement(el);
                   }
               );
           }
       };
       this.kanban = new jKanban(mergedConfig);

We tried to undo the drag and drop by removing and adding element to previous board but it does not work.

Thank you.

[riktar]

Hi, @jandresampaio Now if the dropEl callback returns false the drag will be canceled. here: https://github.com/riktar/jkanban/commit/d7ef0efec048595cd0dba34744028b19e55af19c

[marcosrocha85]

Hello @jandresampaio, thank you for using jKanban.

I had something similar in the past and I solved by just getting the old element and adding it again to the board. You have to keep in mind that removing and adding it again will take item to the end of the board.

var oldElement = kanban.findElement(currentStatusId);
kanban.removeElement(currentStatusId);
kanban.addElement(boardId, {
    'id': currentStatusId,
    'title': oldElement.innerHTML
});