jQuery & jQueryUI Base

by chada090

HTML

<link rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
<div class="containerList">
    <div class="container"><span class="title">test kontejner</span>
        <div class="addTask">
            <div class="switch">Přidat úkol</div>
        </div>
        <div class="taskList"></div>
    </div>
    <div class="container">
      <span class="title">test kontejner1</span>
        <div class="addTask">
            <div class="switch">Přidat úkol</div>
        </div>
        <div class="taskList"></div>
    </div>
    <div class="container placeholder"><span class="title_newCont">Nový kontejner</span></div>
</div>

CSS

.containerList{
    display: flex;
    min-height: 600px;
}
.containerList .container{
    display:inline;
    margin-left: 15px;
    margin-right: 15px;
    flex: 0 0 300px;
    min-height: 150px;
    width: 300px;
    display:flex;
    flex-direction: column;
    background: gray;
    padding: 20px;
    
    
}
.container .title_newCont{
    cursor: pointer;
    color: blue;
}
.container .addTask{
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: white;
    box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.18), 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.11); 
    min-height: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
}
.container .taskList{
    margin-top: 20px;
    background: brown;
    height: 20px;
}
.taskList > div{
    background-color: white;
    margin-top: 15px;
}
.taskList .taskItem{
    margin-bottom: 10px;
    background-color: white;
    box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.18), 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.11); 
    min-height: 40px;
    display:flex;
    align-items: center;
    padding: 5px;
    background: blue;
}
.taskNewItem > *{
    padding: 3px;
    background: green;
}
.taskNewItem input{
    border: none;
    outline: none;
    background: red;
}

.addTask .switch{
    text-align: center;
    width: 100%;
    background: yellow;
}
.taskNewItem{
    display: flex;
    flex-direction: column;
}
.taskNewItem input{
    width: 100%;
}
.taskNewItem .taskButtonAdd{
    width: 100%;
    background-color: green;
    flex:0 0 40px;
    font-size: 15px;
    border: none;
}
.ui-state-highlight{
  background-color:blue !important;
}

JavaScript

$(".containerList").sortable({
//                containment: "parent",
                placeholder: "ui-state-highlight container",
                 change: function( event, ui ) {
                     console.log(ui);
                 }
            }).disableSelection();