Console error with 'not-draggable' class

[felipeEddy]

First, i would like to thank you guys for the excellent work so far.

In my application i have a dropdown inside an item of the kanban. When the dropdown is show, i don't want the item to be draggable, so i'm adding the class 'not-draggable', which i have found in the plugin code. The problem is, when we try to drag an item an error in the console appears, although the item really do not drag.

My question is, i'm using the class in the wrong way or it is really an error in the plugin?

The error is below:
Uncaught TypeError: can't access property "getBoundingClientRect", el is null jkanban.js:1344:28

[felipeEddy]

I've added the following verification in line 983: (!source || item.classList.contains('not-draggable')) { return }
The console error is gone. But i don't know if it is a fix or just a work around. If you guys have a solution i would appreciate.

[riktar]

Hi @felipeEddy can you make a pull request?

[felipeEddy]

Hello @riktar, i made the pull request: #92

Hope it helps. Thanks for the reply.

[riktar]

Hi, @felipeEddy you had worked on dist folder. Can you apply all your code to jkanban.js file and build?
After build you can create a new PR.
Thanks.

[justkidding96]

@riktar I noticed when I applied the class inside my kanban-item div it does not work. Is it possible to extend this feature to scan for underlaying not-draggable classes?

[marcosrocha85]

@riktar I noticed when I applied the class inside my kanban-item div it does not work. Is it possible to extend this feature to scan for underlaying not-draggable classes?

I guess that might not be possible, while dragula event is attached to an entire item.

[justkidding96]

@marcosrocha85 Do you think so? Is it not possible to check if there is a class when starting to drag? If so cancel the drag functionality.

[marcosrocha85]

@marcosrocha85 Do you think so? Is it not possible to check if there is a class when starting to drag? If so cancel the drag functionality.

I don't know if I misread you, but the point of this issue were if item had a 'not-draggable' class so mouse down would not fire dragging. That's actually in production on jKanban. If an item had 'not-draggable' class drag should be cancelled.

[justkidding96]

@marcosrocha85 Yes I understand, I saw the code in production. But this works only on the kanban-item element not elements inside right? Is that possible to fix?

Because I have a dropdown inside kanban-item which I want to exclude for dragging.

[marcosrocha85]

I got it. I drag was being fired just on kanban-item, but it appears to being fired on element that fires the mouse down. I'll take a look at this just right now.

[marcosrocha85]

@marcosrocha85 Yes I understand, I saw the code in production. But this works only on the kanban-item element not elements inside right? Is that possible to fix?

Because I have a dropdown inside kanban-item which I want to exclude for dragging.

I was able to reproduce the issue by adding a dropdown (select) inside an item. The problem is that the drag event is fired after mouse leaves the select element and besides that the event parameters doesn't give any clue that the event came from there. In fact, dragula (which handles the drag and drop from jKanban) is thinking everything started from kanban-item element. What I done in the past was using a plugin like https://github.com/sandywalker/webui-popover like Trello does (poping up a window or dialog in order to show possible options to act)

[marcosrocha85]

I was thinking, what if you use the property "itemHandle"?

itemHandleOptions:{
    enabled: false,
},

[justkidding96]

@marcosrocha85 I tried this but it doesn't have any effect. Do you know something else what I can try?

[justkidding96]

@marcosrocha85 I've tried some code and the code below fixes the issue.

// Fixed dropdown drag issue
$('#kt_kanban_4').on('mousedown', '.dropdown', e => {
   e.preventDefault();
   e.stopImmediatePropagation();
   e.stopPropagation();
});

[marcosrocha85]

@marcosrocha85 I've tried some code and the code below fixes the issue.

// Fixed dropdown drag issue
$('#kt_kanban_4').on('mousedown', '.dropdown', e => {
   e.preventDefault();
   e.stopImmediatePropagation();
   e.stopPropagation();
});

You can use jKanban dragEl or dropEl events.

dragEl: function(el, source) {
  if ($(el).hasClass('not-draggable')) {
    jkanban.drake.cancel(true);
  }
}, // AND/OR
dropEl: function(el, source, target, sibling) {
  if ($(el).hasClass('not-draggable')) {
    jkanban.drake.cancel(true);
  }
}

You can play with that and develop a solution that fits your needs. 🙃