<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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">
Big bitch
<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="#">Bitch</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>
</div>
</div>
<div class="panel-footer">
<a href="#">Add a card...</a>
</div>
</div>
<!--BITCH-->
<div class="panel panel-primary kanban-col">
<div class="panel-heading">
Big bitch
<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="#">Bitch</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>
</div>
</div>
<div class="panel-footer">
<a href="#">Add a card...</a>
</div>
</div>
<!--BITCH-->
<!--BITCH2-->
<div class="panel panel-primary kanban-col">
<div class="panel-heading">
Big bitch
<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="#">Bitch</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>
</div>
</div>
<div class="panel-footer">
<a href="#">Add a card...</a>
</div>
</div>
<!--BITCH2-->
<!--sütun bitiş-->
<!--sütun başlangıç-->
<div class="panel panel-primary kanban-col">
<div class="panel-heading">
DOING
<i class="fa fa-2x fa-plus-circle pull-right"></i>
</div>
<div class="panel-body">
<div id="DOING" class="kanban-centered">
<article class="kanban-entry grab" id="item5" 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="item6" 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>
</div>
</div>
<div class="panel-footer">
<a href="#">Add a card...</a>
</div>
</div>
<!--sütun bitiş-->
<!--sütun başlangıç-->
<div class="panel panel-primary kanban-col">
<div class="panel-heading">
DONE
<i class="fa fa-2x fa-plus-circle pull-right"></i>
</div>
<div class="panel-body">
<div id="DONE" class="kanban-centered">
<article class="kanban-entry grab" id="item5" 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="item6" 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>
</div>
</div>
<div class="panel-footer">
<a href="#">Add a card...</a>
</div>
</div>
<!--sütun bitiş-->
</div>
</div>
<!-- Static Modal -->
<div class="modal modal-static fade" id="processing-modal" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="text-center">
<i class="fa fa-refresh fa-5x fa-spin"></i>
<h4>Processing...</h4>
</div>
</div>
</div>
</div>
</div>
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;
}
.kanban-centered:before, .kanban-centered:after {
content: " ";
display: table;
}
.kanban-centered:after {
clear: both;
}
.kanban-centered:before, .kanban-centered:after {
content: " ";
display: table;
}
.kanban-centered:after {
clear: both;
}
.kanban-centered:before {
content: '';
position: absolute;
display: block;
width: 2px;
/*background: #f5f5f6;*/
top: 20px;
bottom: 20px;
/*margin-left: 18px;*/
}
.kanban-centered .kanban-entry {
position: relative;
/*width: 50%;
float: right;*/
margin: 10px 8px;
clear: both;
border-radius: 4px;
-webkit-box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.5);
box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.5);
}
.kanban-centered .kanban-entry:before, .kanban-centered .kanban-entry:after {
content: " ";
display: table;
}
.kanban-centered .kanban-entry:after {
clear: both;
}
.kanban-centered .kanban-entry:before, .kanban-centered .kanban-entry:after {
content: " ";
display: table;
}
.kanban-centered .kanban-entry:after {
clear: both;
}
.kanban-centered .kanban-entry.begin {
margin-bottom: 0;
}
.kanban-centered .kanban-entry.left-aligned {
float: left;
}
.kanban-centered .kanban-entry.left-aligned .kanban-entry-inner {
margin-left: 0;
margin-right: -18px;
}
.kanban-centered .kanban-entry.left-aligned .kanban-entry-inner .kanban-time {
left: auto;
right: -100px;
text-align: left;
}
.kanban-centered .kanban-entry.left-aligned .kanban-entry-inner .kanban-icon {
float: right;
}
.kanban-centered .kanban-entry.left-aligned .kanban-entry-inner .kanban-label {
margin-left: 0;
margin-right: 70px;
}
.kanban-centered .kanban-entry.left-aligned .kanban-entry-inner .kanban-label:after {
left: auto;
right: 0;
margin-left: 0;
margin-right: -9px;
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.kanban-centered .kanban-entry .kanban-entry-inner {
position: relative;
/*margin-left: -24px;*/
}
.kanban-centered .kanban-entry .kanban-entry-inner:before, .kanban-centered .kanban-entry .kanban-entry-inner:after {
content: " ";
display: table;
}
.kanban-centered .kanban-entry .kanban-entry-inner:after {
clear: both;
}
.kanban-centered .kanban-entry .kanban-entry-inner:before, .kanban-centered .kanban-entry .kanban-entry-inner:after {
content: " ";
display: table;
}
.kanban-centered .kanban-entry .kanban-entry-inner:after {
clear: both;
}
.kanban-centered .kanban-entry .kanban-entry-inner .kanban-time {
position: absolute;
left: -100px;
text-align: right;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.kanban-centered .kanban-entry .kanban-entry-inner .kanban-time > span {
display: block;
}
.kanban-centered .kanban-entry .kanban-entry-inner .kanban-time > span:first-child {
font-size: 15px;
font-weight: bold;
}
.kanban-centered .kanban-entry .kanban-entry-inner .kanban-time > span:last-child {
font-size: 12px;
}
.kanban-centered .kanban-entry .kanban-entry-inner .kanban-icon {
background: #fff;
color: #737881;
display: block;
width: 25px;
height: 25px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-align: center;
-moz-box-shadow: 0 0 0 4px #f5f5f6;
-webkit-box-shadow: 0 0 0 4px #f5f5f6;
box-shadow: 0 0 0 4px #f5f5f6;
float: left;
margin-top: 6px;
}
.kanban-centered .kanban-entry .kanban-entry-inner .kanban-icon.bg-primary {
background-color: #303641;
color: #fff;
}
.kanban-centered .kanban-entry .kanban-entry-inner .kanban-icon.bg-secondary {
background-color: #ee4749;
color: #fff;
}
.kanban-centered .kanban-entry .kanban-entry-inner .kanban-icon.bg-success {
background-color: #00a651;
color: #fff;
}
.kanban-centered .kanban-entry .kanban-entry-inner .kanban-icon.bg-info {
background-color: #21a9e1;
color: #fff;
}
.kanban-centered .kanban-entry .kanban-entry-inner .kanban-icon.bg-warning {
background-color: #fad839;
color: #fff;
}
.kanban-centered .kanban-entry .kanban-entry-inner .kanban-icon.bg-danger {
background-color: #cc2424;
color: #fff;
}
.kanban-centered .kanban-entry .kanban-entry-inner .kanban-label {
position: relative;
background: #f5f5f6;
padding: 0.75em;
/*margin-left: 50px;*/
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
/*.kanban-centered .kanban-entry .kanban-entry-inner .kanban-label:after {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 9px 9px 9px 0;
border-color: transparent #f5f5f6 transparent transparent;
left: 0;
top: 10px;
margin-left: -9px;
}*/
.kanban-centered .kanban-entry .kanban-entry-inner .kanban-label h2, .kanban-centered .kanban-entry .kanban-entry-inner .kanban-label p {
color: #737881;
font-family: "Noto Sans",sans-serif;
font-size: 12px;
margin: 0;
line-height: 1.428571429;
}
.kanban-centered .kanban-entry .kanban-entry-inner .kanban-label p + p {
margin-top: 15px;
}
.kanban-centered .kanban-entry .kanban-entry-inner .kanban-label h2 {
font-size: 16px;
margin-bottom: 10px;
}
.kanban-centered .kanban-entry .kanban-entry-inner .kanban-label h2 a {
color: #303641;
}
.kanban-centered .kanban-entry .kanban-entry-inner .kanban-label h2 span {
-webkit-opacity: .6;
-moz-opacity: .6;
opacity: .6;
-ms-filter: alpha(opacity=60);
filter: alpha(opacity=60);
}
.modal-static {
position: fixed;
top: 50% !important;
left: 50% !important;
margin-top: -100px;
margin-left: -100px;
overflow: visible !important;
}
.modal-static,
.modal-static .modal-dialog,
.modal-static .modal-content {
width: 200px;
height: 150px;
}
.modal-static .modal-dialog,
.modal-static .modal-content {
padding: 0 !important;
margin: 0 !important;
}
.kanban-col {
width: 300px;
margin-right: 20px;
float: left;
}
.panel-body {
padding: 15px 0 0 0;
overflow-y: auto;
}
/*.panel-heading {
cursor: -moz-grab;
cursor: -webkit-grab;
cursor: grab;
}*/
.grab {
cursor: -moz-grab;
cursor: -webkit-grab;
}
.grabbing {
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
.panel-heading {
cursor: context-menu;
}
.panel-heading i {
cursor: pointer;
}
body {
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
}
$(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
// Post data
setTimeout(function () {
var element = document.getElementById(elementId);
children.prepend(element);
$('#processing-modal').modal('toggle'); // after post
}, 1000);
}
event.preventDefault();
});
}
