"Kanban-Board"
Bootstrap 3.1.0 Snippet by bbilginn

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container-fluid">
<div id="sortableKanbanBoards" class="row">
<!--sütun başlangıç-->
<div class="panel panel-primary kanban-col">
<div class="panel-heading">
TODO
<i class="fa fa-2x fa-plus-circle pull-right"></i>
</div>
<div class="panel-body">
<div id="TODO" class="kanban-centered">
<article class="kanban-entry grab" id="item1" draggable="true">
<div class="kanban-entry-inner">
<div class="kanban-label">
<h2><a href="#">Art Ramadani</a> <span>posted a status update</span></h2>
<p>Tolerably earnestly middleton extremely distrusts she boy now not. Add and offered prepare how cordial two promise. Greatly who affixed suppose but enquire compact prepare all put. Added forth chief trees but rooms think may.</p>
</div>
</div>
</article>
<article class="kanban-entry grab" id="item2" draggable="true">
<div class="kanban-entry-inner">
<div class="kanban-label">
<h2><a href="#">Job Meeting</a></h2>
<p>You have a meeting at <strong>Laborator Office</strong> Today.</p>
</div>
</div>
</article>
<article class="kanban-entry grab" id="item3" draggable="true">
<div class="kanban-entry-inner">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
img {
vertical-align: middle;
}
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
.img-rounded {
border-radius: 3px;
}
.img-thumbnail {
background-color: #fff;
border: 1px solid #ededf0;
border-radius: 3px;
display: inline-block;
height: auto;
line-height: 1.428571429;
max-width: 100%;
moz-transition: all .2s ease-in-out;
o-transition: all .2s ease-in-out;
padding: 2px;
transition: all .2s ease-in-out;
webkit-transition: all .2s ease-in-out;
}
.img-circle {
border-radius: 50%;
}
.kanban-centered {
position: relative;
margin-bottom: 30px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(function () {
var kanbanCol = $('.panel-body');
kanbanCol.css('max-height', (window.innerHeight - 150) + 'px');
var kanbanColCount = parseInt(kanbanCol.length);
$('.container-fluid').css('min-width', (kanbanColCount * 350) + 'px');
draggableInit();
$('.panel-heading').click(function() {
var $panelBody = $(this).parent().children('.panel-body');
$panelBody.slideToggle();
});
});
function draggableInit() {
var sourceId;
$('[draggable=true]').bind('dragstart', function (event) {
sourceId = $(this).parent().attr('id');
event.originalEvent.dataTransfer.setData("text/plain", event.target.getAttribute('id'));
});
$('.panel-body').bind('dragover', function (event) {
event.preventDefault();
});
$('.panel-body').bind('drop', function (event) {
var children = $(this).children();
var targetId = children.attr('id');
if (sourceId != targetId) {
var elementId = event.originalEvent.dataTransfer.getData("text/plain");
$('#processing-modal').modal('toggle'); //before post
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

How does it save the data in a database? This allows you to move cards around but does not save the changes anywhere. Are there any examples of how to save the changes you make?

WisTex () - 4 years ago - Reply 0


Hi,

I am trying to do the same kanban dashboard example. But, in my example component doesn't drag and drop. Where can I make any mistake? Can you give an idea?

Thank you in advance.

Kind Regards,

training1 (1) - 5 years ago - Reply 0


Hi,

I noticed right now. It does not work in Safari. I have no other idea, I've been doing backend programming for a long time. Sorry :(

bbilginn (-3) - 5 years ago - Reply -1


Hi,

Thank you:) I solved my problem..

training1 (1) - 5 years ago - Reply 1