Working drag and drop bootstrap

by Rachel Gallen

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="common">
    <div class="container-fluid">
        <div class="row">
                <ul class="col-sm-3 col-md-2 sidebar nav nav-sidebar" > <li class="group" class="draggable" ><a href="#" class="list-group-item">
                <span class="badge">dasdsa</span>
                <span class="badge">dsad</span>
                <h4>
                 dsad
                 <br /><small>dsadsa</small>
                 <br /><small>dsadsa</small>
                </h4>
              </a>
                    </li>
                </ul>
             <div id="drophere" class="col-sm-9 col-md-9">MAIN PANEL</div>
        </div>
    </div>
   
</div>

CSS

.draggable {
    border: solid 2px gray;
}
.sidebar {
    position:fixed;
    width:200px;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-y: auto;
    /* Scrollable contents if viewport is shorter than content. */
    overflow-x: visible;
    background-color: #f5f5f5;
    white-space: nowrap;
    border-right: 1px solid #eee;
    padding-left: 30px;
    padding-right: 30px;
}
/* Sidebar navigation */
  .nav-sidebar {
   width:200px;
   height:100vh;
    margin-right: -21px;
    /* 20px padding + 1px border */
    margin-bottom: 20px;
    margin-left: -20px;
}
.group{width:150px;
    height:auto;}


#drophere{width:700px;left:200px; height:100vh;}

JavaScript

$(".draggable").draggable();
var draggableArguments={
     revert: 'invalid',
     helper:'clone',
     appendTo: '#drophere',
     refreshPositions: true,
     containment: 'DOM',
     zIndex: 1500,
     addClasses: false
};

$('.group').draggable(draggableArguments);
$('.group').droppable();

$(".nav-sidebar").droppable({
    tolerance: "intersect",
    accept: ".group",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
        $(".nav-sidebar").append($(ui.draggable));
    }
});
$('#drophere').droppable({
    tolerance: "intersect",
    accept: ".group",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {        
        $('#drophere').append($(ui.draggable));
    }
});