jquery-bootstrap base fiddle

by ashraffayad

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<div class="sidebar">
    <div class="sidebar-item">drag 1</div>
    <div class="sidebar-item">drag 2</div>
    <div class="sidebar-item">drag 3</div>
</div>
<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <div class="c-zone">
                <div class="elm"></div>
                <div class="elm"></div>
                <div class="elm"></div>
                <div class="elm"></div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="c-zone">
                <div class="elm"></div>
                <div class="elm"></div>
                <div class="elm"></div>
                <div class="elm"></div>
            </div>
        </div>
    </div>

CSS

.c-zone {
     min-height:300px;
     padding:10px;
     outline: solid 1px #dcdde2;
     position:relative
 }
 .elm {
     height:100px;
     outline:solid 1px #0fabfa;
     margin-bottom: 15px;
     background: #fff
 }
 .sidebar {
     position:fixed;
     width:66px;
     left:5px;
     box-shadow:0 0 10px #aaa;
     z-index:1000;
     padding:2px;
     background: #fff
 }
 .sidebar-item {
     width:60px;
     height:60px;
     margin:1px;
     border:solid 1px rgba(133, 175, 214, 0.87);
     float:left;
     cursor:move;
     line-height:60px;
     text-align: center
 }

JavaScript

$(document).ready(function () {
    $('.c-zone').sortable({
        connectWith: '.c-zone',
        update: function (e, ui) {
            if($(ui.item).hasClass('sidebar-item')){
                $(ui.item).remove();
            };
        }
    });

    $(".sidebar-item").draggable({
        connectToSortable: ".c-zone",
        helper: "clone",
        revert: "invalid",
        appendTo: "body",
        distance: 10,
        zIndex: 1000
    });
});