fixed drag and drop breaking adminlte's design

- updated ControlSidebar.js to hide control sidebar instead of only moving it
- updated dashboard.js to use containment in sortable()
- added display none to control sidebar content in index.html

(Closes #1924)

Author: REJack

build/js/ControlSidebar.js

@@ -71,17 +71,20 @@
   };
 
   ControlSidebar.prototype.expand = function () {
+    $(Selector.sidebar).show();
     if (!this.options.slide) {
       $('body').addClass(ClassName.open);
     } else {
       $(Selector.sidebar).addClass(ClassName.open);
     }
 
+
     $(this.element).trigger($.Event(Event.expanded));
   };
 
   ControlSidebar.prototype.collapse = function () {
     $('body, ' + Selector.sidebar).removeClass(ClassName.open);
+    $(Selector.sidebar).fadeOut();
     $(this.element).trigger($.Event(Event.collapsed));
   };
 

dist/js/adminlte.js

@@ -389,17 +389,20 @@ throw new Error('AdminLTE requires jQuery')
   };
 
   ControlSidebar.prototype.expand = function () {
+    $(Selector.sidebar).show();
     if (!this.options.slide) {
       $('body').addClass(ClassName.open);
     } else {
       $(Selector.sidebar).addClass(ClassName.open);
     }
 
+
     $(this.element).trigger($.Event(Event.expanded));
   };
 
   ControlSidebar.prototype.collapse = function () {
     $('body, ' + Selector.sidebar).removeClass(ClassName.open);
+    $(Selector.sidebar).fadeOut();
     $(this.element).trigger($.Event(Event.collapsed));
   };
 

dist/js/adminlte.min.js

@@ -11,6 +11,7 @@ $(function () {
 
   // Make the dashboard widgets sortable Using jquery UI
   $('.connectedSortable').sortable({
+    containment         : $('section.content'),
     placeholder         : 'sort-highlight',
     connectWith         : '.connectedSortable',
     handle              : '.box-header, .nav-tabs',

dist/js/pages/dashboard.js

@@ -1035,7 +1035,7 @@ <h3 class="box-title">Calendar</h3>
   </footer>
 
   <!-- Control Sidebar -->
-  <aside class="control-sidebar control-sidebar-dark">
+  <aside class="control-sidebar control-sidebar-dark" style="display: none;">
     <!-- Create the tabs -->
     <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
       <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>