I'm trying to cancel a drag event in order to prevent moving cards on a automatic board, but when I call jkanban.drake.cancel(true) the dragula raises an exception saying "el is null" on touchy function.
Do you have any suggestion to implement a "beforeDrag" event in order to validate if a card can be moved? I'm intended to develop that on jKanban.

Hi!

I'm a bit of a noob with using servers and package.json, I have a project i'm implementing this into and am having some trouble with the package.json and getting the server running to save changes made while using the kanban board. I've included a link to the project, would be able to talk over google hangouts as well!

https://glitch.com/edit/#!/studio821?path=package.json:16:46

First of all, this is an elegant, clean, and minimalist solution and I'm going to start using it in my internal project.

I have one feature request. I'd like to specify for each board the titles/ids of other boards the items can be dragged to.

Maybe even have a default option to only be able to drag items to adjacent boards.

Hello, how can i change style of main element?
<main class="kanban-drag"></main>

I mean i want to set different classes to each main elements.

I'd like to apply multiple classes to the board header but there's support for only one.

class: 'bg-info' works
class: 'bg-info text-center' errors out
class: 'bg-info.text-center' doesn't work
class: ['bg-info', 'text-center'] doesn't work

Can you please help to get the board orders in the event when a board is dragged around,
dragBoard : function (el, source) {}, I know we can use this listener to detect the movement, but how to get the new order to pass to server

If I run the example page & hit the + button to call the "AddForm" option, the form is dragable

How can I move a board programmatically?

I want to fix a board in the first position. So I want to move back to the initial position even if another board has been moved to the first one.

I know that I can make a board not draggable, but if you change another card for that position, it will be moved.

New Feature:
It would be good to have a parameter so that all boards have the same height (all grow and shrink together).

Use case:
My board is so full that after scrolling down I still want to be able to drag and drop from one board to another.

I am trying to bind the boards array as a data property in vuejs, on initial page load, it take all the array item and render boards correctly, however when i do modification to vue array it doesnot affect in UI, looks like kanban board are not reactive,

Do you have any function to refresh or rebuilt the boards from scratch, so when I do any changes to vue data property, I can rebuilt the boards. I tried to run the init function, however it just duplicated all the baords with changes as well, if you have a function to remove all board elements and boards with single function call, then it will be easy to delete and re call the init function to make it like reactive

When I set the dragTo value to a board, the item callbackdrop is ignoring dragTo possible limitations.
In my project, I'm allowing the items to move through the boards one at once. It's working fine, but when this is done, I have to change the status_id of this item I dragged to the next board. To accomplish this, I created an $.ajax to post the new id to that Item. The problem is: the drop callback is firing this $.ajax dispite of the board limitations (which is visually showing that the dropping are not allowed in certain boards), changing the item ID, which is not the expected behaviour. Can you help me with this? What can I be doing wrong on here?
Sorry if this is not an Issue. Tell me if it's not. Thanks for this amazing work!

Regards,
Jhon

I want to add a hyperlink or button to the title, so that i can give option to edit tabs. Currently the hyperlink added inside the tabs along with the title doesnt work...

Hi guys,

This is an awesome library, just want to ask if the kanban supports Mobile especially Drag and Drop. See the image below (Nevermind the offline support ) Just want to show you below how Mobile kanban works.

dragBoards: false or dragBoards: true whatever boards always draggable.

It would be nice if were possible to add class to items like already have in boards

Will not jkanban release to npm?

Hi
Would it be possible to give the API a boards[] level accessor so that we can dump the state out easily (I thought options.boards[] would do this, but ran into similar issues as #45. )
Thanks also for the library,

Hi, is it possible to edit elements in the board?

Also, can we programatically move elements from one board to another if certain conditions is met?

Thanks!

This is an idea issue. This library has some great built-in functionality and given the need to track data across user interactions with the board, incorporating a state management framework like React would be very compelling for more developers to adopt jKanban.

I'll try to personally do some research into common patterns for wrapping libraries with a react interface (some other examples like fullcalendar-react and react-map-gl come to mind), but any community feedback and input is appreciated!

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

I am developing a collaborative Kanban for a couple of users and I have a capability of remove items from a board. In that, I call jkanban.removeElement(elementId) to remove a card from current Kanban in order to add at another Kanban (like "Move" of Trello). The problem is when I call jkanban.remove() when the item is not there, jKanban raises a "el is null" error because of:

        this.removeElement = function (el) {
            if (typeof(el) === 'string')
                el = self.element.querySelector('[data-eid="' + el + '"]');
            el.remove(); //<--- here
            return self;
        };

I suggest to add a validation for removeLike methods to verify if element actually exists:

        this.removeElement = function (el) {
            if (typeof(el) === 'string')
                el = self.element.querySelector('[data-eid="' + el + '"]');
            if (el !== null)
                el.remove();
            return self;
        };

Is plugin not compatible with mobile?

we want to have only one button for adding new issues, on the first board. Is there a way to do this?

Is there a way to make a board not movable ? Dragable ?

In my case, I am building a Kanban board that has a Backlog and a Finished Boards.... I want to make those statics... not movables....

Is there a way to do this ?

Thank you

Do you have any plans about release versioning?

It would be nice to have a function to export the elements to JSON.
Using this it should be easier to send the elements to ajax for example.

If I put some div in board title, ex.:

<div class="row">
<div class="col-md-9">Board Title</div>
<div class="col-md-3" style="text-align: right">Menu</div>
</div>'

Drag system failed... How I can fix it?

I have been trying to connect to your demo site: http://www.riccardotartaglia.it/jkanban/
but keeping getting a connection failed/timed out error.

How can I Know which board was the element dropped to?

Hi there,

Is there a way we can create our own kanban custom DOM elements like this?

The image above indicates we had four dom elements that needs to be placed on Kanban Item.

Thanks,
Mark

when we added board out of current viewport and then drag them over the last board it is not scrolling

Another feature request: Provide an option to keep the boards affixed and not allow drag/drop operations on the board itself.

Hey there,

How make a copy of item between boards? I need use some extension or adaptation from Dragula or exists some function or option for the item?

Regards.

Wouldn't be nice if we had custom attributes to items of a board with data- like properties? Here's a suggestion:

@@ -14,6 +14,7 @@ var dragula = require('dragula');
 
     this.jKanban = function () {
         var self = this;
+        this._disallowedItemProperties = ['id', 'title', 'click', 'drag', 'dragend', 'drop'];
         this.element = '';
         this.container = '';
         this.boardContainer = [];
@@ -159,6 +160,7 @@ var dragula = require('dragula');
             nodeItem.dragfn = element.drag;
             nodeItem.dragendfn = element.dragend;
             nodeItem.dropfn = element.drop;
+            __appendCustomProperties(nodeItem, element);
             __onclickHandler(nodeItem);
             board.appendChild(nodeItem);
             return self;
@@ -249,6 +251,7 @@ var dragula = require('dragula');
                     nodeItem.dragfn = itemKanban.drag;
                     nodeItem.dragendfn = itemKanban.dragend;
                     nodeItem.dropfn = itemKanban.drop;
+                    __appendCustomProperties(nodeItem, itemKanban);
                     //add click handler of item
                     __onclickHandler(nodeItem);
                     contentBoard.appendChild(nodeItem);
@@ -351,6 +354,15 @@ var dragula = require('dragula');
             return el[0]
         }
 
+        function __appendCustomProperties(element, parentObject) {
+            for (var propertyName in parentObject) {
+                if (self._disallowedItemProperties.indexOf(propertyName) > -1) {
+                    continue;
+                }
+
+                element.setAttribute('data-' + propertyName, parentObject[propertyName]);
+            }
+        }

Usage example:

var jkanban = new jKanban({
    boards:
    [
        {
            "id"    : "_todo",
            "title" : "Todo Tasks",
            "item"  : [
                {
                    "id"      : "1",
                    "title"   : "Card inner content...",
                    "username": "marcosrocha85"
                }
            ]
        }
    ]});

That will produce a result like this:

<div data-id="_todo" class="kanban-board" style="width: 250px; margin-left: 15px; margin-right: 15px;">
    <header class="kanban-board-header">
        <div class="kanban-title-board">
            Todo Tasks
        </div>
    </header>
    <main class="kanban-drag">
        <div class="kanban-item" data-eid="1" data-username="marcosrocha85">
            Card inner content...
        </div>
    </main>
    <footer></footer>
</div>

If it's ok, I can create a pull request.

How can get the order of the tabs. When move the columns i cant store the order. I mean in the event dropEndl get the order and save the sequence.

Another feature request

What I am thinking is that each item has an optional url or endpoint, or validate option where I can slot in the URL for a json endpoint. Upon finishing the drag, this an AJAX call gets triggered to this URL and if the response is true or success, the drag operation persists, otherwise it's reverted.

How this will work for my use case is that I will have a state machine for tasks in my Ruby models and upon dragging, if the state machine verifies the state change for a task is valid and allowed, and persists the change to the database, then the UI reflects it accordingly.

I know there are affordances for adding drag functions where I could make an AJAX call myself but this interface will make this feature a lot more plug-n-play.

I think this should be removed from jkanban.js:
in addElement function:
console.log(element);

Like the header, have the ability for a footer with it's own class. So you could total up some of the custom data options.

How I can move item to another board by API?

I use
dropEl : function (el, target, source, sibling) {}
then
kanban.addElement(board_id, el);

But element without content

P.S. I found moveElement method, but it also has that issue...

Hello Sir,
I am using this jkanban in SharePoint and am trying to change the status of dragged item using dropEI method.
To achieve this, i thinking to invoke a custom method using element ID and board ID.
Am able to get the element ID but i am stuck with board ID.

Please help me with some snippet so that i can proceed with this.

I want to save the order state of elements on the board in the backend db. I know we can listen for call back dragendEl or dragEl in order to detect the item reordering inside a board, how can I get the new order when an item is reordered,
I also want to store the order of the Board as well when I enable dragBoards , your help is kindly appreciated

Is it possible to "sort" the itens inside a board ?

Or, is it possible to change the position of a item inside the board using javascript ?

I think that I can remove all itens and add then again in a diferent order... but, before I try this, I wanted to ask you if this is already possible...

THANK YOU !!!!

Currently addElement adds to the end. It would be nice to be able to add elements at the start (or before the x'th element)

Add support to a native or at least, to custom Scrollbars (like SlimScroll), right now, the component that holds the items don´t support this, at least not without losing the drag-and-drop functionality.

Thanks.

It would be nice to have a function that is called when something changed.
When an element is added, replaced, or a board was added,...

var kanban = new jKanban({
    changed           : function (el) {
        // something changed
        // e.g. add code to save items to server
    }, 

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.

dragendEl method should also return ids of source and target boards so the information can be used to inform the backend of where an element started from, and where the element ended up at.

Hi !

We have to give a list of boards in order to create our jkanban.
I see that this list have 2x more elements after jkanban creation than before.

For instance, if I have 5 elements in the boardJson given as "boards" parameter, after creation of jkanban I have boardJson.lenght = 10.
This is not good for me because I need this list for other purpose. Duplicate boards are boring the handle.

Looking into the code, I see this " self.options.boards.push(board);" in the "addBoards" function.
As boards are already in options, I think that this is unusefull and the root of my trouble.

I comment this line, and everything "seems" to work fine without this line.

Can I have your opinion on this?

Thank you!