Comments (7)
Hi @jhonatanjunio.
This is a bug to fix in the library, because also when you drop an item on an invalid board jKanban trigger anyway thte drop event. I'm working on it 😄
from jkanban.
@jhonatanjunio My example of code:
jkanban = new jKanban({
element: '#my_kanban',
click: function(el) {
showDialogModal(
$(el).data("eid"), // item id
$(el.parentElement.parentElement).data("id") // board id
);
},
dropEl: function(el, target, source, sibling) {
var allowedBoards = [];
jkanban.options.boards.map(function (board) {
if (board.id === $(source.parentElement).data("id")) {
board.dragTo.map(function (_board) {
if (allowedBoards.indexOf(_board) === -1) {
allowedBoards.push(_board);
}
});
return allowedBoards[0];
}
return allowedBoards[0];
});
if (allowedBoards.length > 0 && allowedBoards.indexOf($(target.parentElement).data("id")) === -1) {
kanban.drake.cancel(true);
return;
}
var item_id = $(el).data("eid");
var new_board = target.children("header").data('id');
$.ajax({
type: 'POST',
url: 'localhost/move',
data: {
'item_id': item_id,
'new_board': new_board,
},
cache: false,
success: function (result) {
console.log("It's done.");
},
error: function() {
console.log("Uh oh! There's an error!");
}
});
}
});
from jkanban.
Thanks, @marcosrocha85 ! This solved my problem.
I had to remove the var new_board = target.children("header").data('board_id');
line, which was throwing the error target.children its not a function
.
Anyways, I sorted this out and everything is working as expected.
Thanks a lot!
Regards,
Jhon
from jkanban.
Hi @jhonatanjunio can you post an example of your code?
from jkanban.
Of course! Here you go!
kanban.addElement("_primaryboard", {
"title": item.name,
"id": item.id,
"drop": function(el){
$.ajax( {
"url" :"/changeItemStatus",
"type" :"POST",
"data": {"_token": _token, "id": el.dataset.eid},
"dataType": "json",
});
},
"click": function (el) {
location.replace("kanban?item-id="+el.dataset.eid);
$('.box1, .box2').toggle(600);
}
})
This is running under an Ajax call that collect items from database to fill the boards, based on their statuses. I simplified the names I used (which it was in portuguese) to a close approach, focusing on the drop
callback I mentioned. Then, here you have the PHP Laravel function which changes the item status:
public function changeItemStatus(Request $request)
{
//get the ajax var item_id
$item_id = $request['id'];
$item= Item::find($item_id); //get the item based on the id from the Ajax call
if($item->status_id < ItemStatus::FINAL_CHANGEABLE_STATUS) //check if the status is not the last
{
$item->status_id = $item->status_id + 1; //changes the status to +1 until it is the last status
}
try{
//Save the item new status
$item->save();
}catch (\PDOException $e)
{
//Error message.
}
//Call the success message and the redirect to the kanban page.
}
Thanks in advance, @riktar !
from jkanban.
Nice, @riktar ! I really appreciate that.
Let me know if I can help you somehow or even if you have news about this please?
Again, thanks and congrats for the amazing work!
from jkanban.
I had that issue either. Unlikely dragula fires the drop event even when we had set dragTo attribute.
@riktar I guess expose board dragTo property can help developer to handle that. I saying just because at my application I handle item sorting, drag and drop, user permissions and so on.
from jkanban.
Related Issues (20)
- Is there a method to refresh/reload the kanban items? HOT 4
- Is there any way to collapse kanban board? HOT 2
- Checkbox is not working on board HOT 21
- dropEl function for sorting boards HOT 4
- Uncaught TypeError: Cannot read properties of undefined (reading 'dragTo') HOT 1
- Header of kanban boards - adding a button HOT 5
- Footer button to add items on a specific board HOT 8
- HEX colors for boards headers HOT 2
- Browser context menu disabled - how to enable. HOT 1
- Which js minification software does jkanban use HOT 2
- can i add Kebab menu to kanban-item to i can drag item to anther id ??? HOT 2
- importing jkanban/dist/jkanban.min.js file throws an error HOT 4
- How to get item id when clicked HOT 1
- JKanban drag and move not working properly when we use the mobile view HOT 3
- replaceElement API Issue cause click function fired multiple
- Pagination support HOT 4
- collapsible Board
- Disabled element completly not interactible HOT 1
- import problem with vite HOT 2
- Width
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jkanban.