Is it possible to configure the drag behavior of the kanban control?

[Tom Denecke]

Dear Syncfusion support team,

we are looking to customize the drag behavior of the kanban control. Two things are disturbing us:

1. The card being dragged is always offset to the bottom right of the mouse pointer. Instead, we would like it to be anchored to the mouse pointer where the dragging started (Please excuse the hand drawn mouse pointers, I had to manually add them to the screenshots to get my points across :-) ).
   Actual:
   
   Expected:
   
   
2. When dragging a card upwards in a column, you have to drag it to the card above the place where you want to drop it to get the correct target. Intuitively, our users only drag it to the space between the two cards, leading to the card being inserted below the card they actually wanted to place it.
   Actual behavior:
   
   Expected behavior:
   
   

Is it possible to configure these behaviors in the current control? We have not been able to find any public apis to achieve this. Point 2 was, by the way, the behavior of the EssentialJS 1 kanban control, and we would like to keep it, since our users are now accustomed to it.

Thanks for your help!

Cheers,

Christoph

[Vinitha Jeyakumar]

Hi Tom,

Query 1. "The card being dragged is always offset to the bottom right of the mouse pointer. Instead, we would like it to be anchored to the mouse pointer where the dragging started"

Your requirement to change the cursor behavior of the Kanban card can be achieved by setting the property enableTailMode as false in the dataBound event of Kanban. Please check the code below,

Code snippet:

dataBound(args) {

    let card = this.element.querySelectorAll('.e-card');

    let length = card.length;

    for (let i = 0; i < length; i++) {

      card[i].ej2_instances[0].enableTailMode = false;

    }

  },

Sample: https://stackblitz.com/edit/ytygye?file=index.ts

Query 2. "When dragging a card upwards in a column, you have to drag it to the card above the place where you want to drop it to get the correct target. Intuitively, our users only drag it to the space between the two cards, leading to the card being inserted below the card they actually wanted to place it"

We have tried to replicate the reported issue at our end by following the steps you have provided. but unfortunately, we didn't face any issues as you reported while drag and drop the cards. please check the video illustration for your reference

Video illustration: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Kanban_drag-1925411897

Please share us with the exact issue reproducing steps, your package version and video illustration of issue replication to further validate on our end.

Regards,

Vinitha

[Tom Denecke]

Hello Vinitha!

Thanks for your reply. Query 1 works perfectly, we will implement this. For query 2 your example video basically demonstrates the issue, just with dragging downwards. You should take a card, put it to the bottom of a column and then start dragging upwards. Then, you will see the effect, that the mouse pointer is already above the card, but the placeholder is still below.

However, by deactivating the "enableTailMode", the effect is mitigated, because it is no longer easy to see that the pointer is already above the card. So, it is not as important.

We do, however, still have two open bug reports, one from Monday, one from yesterday, that nobody has yet responded to. Maybe, you could have a look at those, because one of them is a show stopper for us.

https://www.syncfusion.com/feedback/37730/dragging-cards-to-empty-columns-can-fail

https://www.syncfusion.com/feedback/37690/dragged-cards-are-incorrectly-positioned-when-using-frozen-swimlanes-and-a-fixed

Thanks for your help.

Cheers,
Christoph

[Vinitha Jeyakumar]

Hi Tom,

We are validating the feedbacks you have sent and also able to replicate the issue at our end. we will update you the further bug details on the feedback itself.

Regards,

Vinitha

[Siamak Montazer]

Hi Vinitha,

I have the same problem for dragging position of Kanban cards. Is there any way to configure an offset of drag over target element, for example in current state of Syncfusion Kanban while dragging, the pointer should be exactly between the top and the bottom card I want to be able (consider enableTailMode=false ) to see the draggable area when the middle of the draggaded card is between lower middle of the top card and the upper middle of the bottom card.

Another question, is there any option to animate the target scope card moves?

Please check the attached video to see the similar behaviours.

Regards,
Siamak

Attachment: DS3.mkv_3ec648fd.zip

[Vinitha Jeyakumar]

Hi Siamak,

Query 1: "I have the same problem for dragging position of Kanban cards. Is there any way to configure an offset of drag over target element, for example in current state of Syncfusion Kanban while dragging, the pointer should be exactly between the top and the bottom card I want to be able (consider enableTailMode=false ) to see the draggable area when the middle of the draggaded card is between lower middle of the top card and the upper middle of the bottom card."

We couldn't understand your requirement with Kanban card drag and drop. On further validating, the video you have attached and the Kanban sample with enableTailMode=false are working same. So can you please share your exact requirement along with some video illustration for our better understanding?

Query 2 : "is there any option to animate the target scope card moves?"

Yes, you can animate the card drag moves using the CSS styles like below,

Code snippet:

@keyframes begindrag {

        0% {

          transform: rotate(0deg) translateX(-50%) translateY(-75%);

        }

        10% {

          transform: rotate(-3deg) translateX(-50%) translateY(-75%);

        }

        30% {

          transform: rotate(3deg) translateX(-50%) translateY(-75%);

        }

        55% {

          transform: rotate(-1deg) translateX(-50%) translateY(-75%);

        }

        80% {

          transform: rotate(1deg) translateX(-50%) translateY(-75%);

        }

        100% {

          transform: rotate(-1deg) translateX(-50%) translateY(-75%);

        }

      }

      .e-cloned-card {

        animation-name: begindrag !important;

        animation-duration: 0.8s !important;

        animation-timing-function: ease !important;

        animation-fill-mode: forwards !important;

        box-shadow: #0006 0 0 4px 0 !important;

      }

Sample: https://stackblitz.com/edit/kq5q6m?file=index.html

Regards,

Vinitha