riktar / jkanban

Vanilla Javascript plugin for manage kanban boards
https://www.riccardotartaglia.it/jkanban/
Apache License 2.0
1.07k stars 299 forks source link

DragTo when no card moved #15

Closed marcosrocha85 closed 6 years ago

marcosrocha85 commented 6 years ago

I noticed that when I set the dragTo property and start dragging an item, the boards not allowed to drop became brighter. But when I drop the card in the same position it was, intending to cancel move to another board, the entire kanban doesn't repaint those disabled boards. The kanban is set to dragBoards: false

captura de tela de 2018-05-28 13-02-30

marcosrocha85 commented 6 years ago

Tested a alert on dropEl when moving the "Another card" to it's same position and noticed that the alert didn't popped out. Maybe that's a bug from dragula?

riktar commented 6 years ago

@marcosrocha85 When you drag an element in the same position it's not a complete drag but an "undo" move so it's correct that the alert didn't popped out.

marcosrocha85 commented 6 years ago

@riktar ok, but how we can fix the disabled boards when "undo"? I'm trying to evaluate the code but my browser is saying require is not defined.

marcosrocha85 commented 6 years ago

Basically the fix was call new function enableAllBoards on Dragula's cancel event. Here it is:

@@ -92,10 +92,13 @@ var dragula = require('dragula');

                 //Init Drag Item
                 self.drake = self.dragula(self.boardContainer, function () {
                     revertOnSpill: true
                 })
+                    .on('cancel', function(el, container, source) {
+                        self.enableAllBoards();
+                    })
                     .on('drag', function (el, source) {
                         el.classList.add('is-moving');
                         var boardJSON = __findBoardJSON(source.parentNode.dataset.id);
                         if (boardJSON.dragTo !== undefined) {
                             self.options.boards.map(function (board) {
@@ -113,17 +116,12 @@ var dragula = require('dragula');
                         self.options.dragendEl(el);
                         if (el !== null && typeof(el.dragendfn) === 'function')
                             el.dragendfn(el);
                     })
                     .on('drop', function (el, target, source, sibling) {
+                        self.enableAllBoards();

-                        var allB = document.querySelectorAll('.kanban-board');
-                        if (allB.length > 0 && allB !== undefined) {
-                            for (var i = 0; i < allB.length; i++) {
-                                allB[i].classList.remove('disabled-board');
-                            }
-                        }
                         var boardJSON = __findBoardJSON(source.parentNode.dataset.id);
                         if (boardJSON.dragTo !== undefined) {
                             if (boardJSON.dragTo.indexOf(target.parentNode.dataset.id) === -1 && target.parentNode.dataset.id !== source.parentNode.dataset.id) {
                                 self.drake.cancel(true)
                             }
@@ -136,10 +134,19 @@ var dragula = require('dragula');
                         }
                     })
             }
         };

+        this.enableAllBoards = function() {
+            var allB = document.querySelectorAll('.kanban-board');
+            if (allB.length > 0 && allB !== undefined) {
+                for (var i = 0; i < allB.length; i++) {
+                    allB[i].classList.remove('disabled-board');
+                }
+            }
+        };
+
         this.addElement = function (boardID, element) {
             var board = self.element.querySelector('[data-id="' + boardID + '"] .kanban-drag');
             var nodeItem = document.createElement('div');
             nodeItem.classList.add('kanban-item');
             if (element.id) {
marcosrocha85 commented 6 years ago

Pull request #16 created.

riktar commented 6 years ago

Resolved in pull request #16