riktar / jkanban Goto Github PK
View Code? Open in Web Editor NEWVanilla Javascript plugin for manage kanban boards
Home Page: https://www.riccardotartaglia.it/jkanban/
License: Apache License 2.0
Vanilla Javascript plugin for manage kanban boards
Home Page: https://www.riccardotartaglia.it/jkanban/
License: Apache License 2.0
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 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;
};
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
we want to have only one button for adding new issues, on the first board. Is there a way to do this?
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!
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
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)
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.
Will not jkanban release to npm?
when we added board out of current viewport and then drag them over the last board it is not scrolling
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
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 !!!!
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.
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.
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
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...
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.
dragBoards: false
or dragBoards: true
whatever boards always draggable.
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?
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.
Do you have any plans about release versioning?
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,
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 have been trying to connect to your demo site: http://www.riccardotartaglia.it/jkanban/
but keeping getting a connection failed/timed out error.
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!
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
It would be nice if were possible to add class to items like already have in boards
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!
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.
Another feature request: Provide an option to keep the boards affixed and not allow drag/drop operations on the board itself.
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,
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.
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
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.
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
I think this should be removed from jkanban.js:
in addElement function:
console.log(element);
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.
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.
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!
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
How can I Know which board was the element dropped to?
Is plugin not compatible with mobile?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.