    <ol class="breadcrumb">
		<li><a href="#/">Dashboard</a></li>
		<li class="active">Draggable Panels</li>
	</ol>

<div class="container-fluid">

<div class="row">
  <div class="col-md-12">
    <div class="alert alert-info clearfix">
      <h3 class="mt0">Draggable Panels</h3>
      <p>Wijets is a jQuery plugin that provides advanced panel options which can be configured all with a single line of code - <code>$.wijets().make();</code>. All other settings are configured directly with data-attributes!</p>
    </div>
  </div>
</div>

<div class="row" data-widget-group="group-demo">
  <div class="col-md-4">
    <div class="panel" data-widget='{"id" : "wiget1"}'>
      <div class="panel-heading">
        <div class="panel-ctrls button-icon" 
          data-actions-container="" 
          data-action-collapse='{"target": ".panel-body"}'
          data-action-expand=''
          data-action-colorpicker=''
          data-action-refresh='{"type": "circular", "url": "../../ajax-text.html"}'
          data-action-close=''
          >
        </div>
        <h2>Panel</h2>
      </div>
      <div class="panel-editbox" data-widget-controls=""></div>
      <div class="panel-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius nam dolore ad est molestiae quasi qui id quas, corporis, laboriosam.</p>
      </div>
    </div>
    <div class="panel panel-inverse" data-widget='{"id" : "wiget2"}'>
      <div class="panel-heading">
        <div class="panel-ctrls button-icon" 
          data-actions-container="" 
          data-action-collapse='{"target": ".panel-body"}'
          data-action-expand=''
          data-action-colorpicker=''
          data-action-refresh='{"type": "circular", "url": "../../ajax-text.html"}'
          data-action-close=''
          >
        </div>
        <h2>Panel</h2>
      </div>
      <div class="panel-editbox" data-widget-controls=""></div>
      <div class="panel-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius nam dolore ad est molestiae quasi qui id quas, corporis, laboriosam.</p>
      </div>
    </div>
    <div class="panel panel-primary" data-widget='{"id" : "wiget3"}'>
      <div class="panel-heading">
        <div class="panel-ctrls button-icon" 
          data-actions-container="" 
          data-action-collapse='{"target": ".panel-body"}'
          data-action-expand=''
          data-action-colorpicker=''
          data-action-refresh='{"type": "circular", "url": "../../ajax-text.html"}'
          data-action-close=''
          >
        </div>
        <h2>Panel</h2>
      </div>
      <div class="panel-editbox" data-widget-controls=""></div>
      <div class="panel-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius nam dolore ad est molestiae quasi qui id quas, corporis, laboriosam.</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="panel panel-success" data-widget='{"id" : "wiget4"}'>
      <div class="panel-heading">
        <div class="panel-ctrls button-icon" 
          data-actions-container="" 
          data-action-collapse='{"target": ".panel-body"}'
          data-action-expand=''
          data-action-colorpicker=''
          data-action-refresh='{"type": "circular", "url": "../../ajax-text.html"}'
          data-action-close=''
          >
        </div>
        <h2>Panel</h2>
      </div>
      <div class="panel-editbox" data-widget-controls=""></div>
      <div class="panel-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius nam dolore ad est molestiae quasi qui id quas, corporis, laboriosam.</p>
      </div>
    </div>
    <div class="panel panel-danger" data-widget='{"id" : "wiget5", "draggable": "false"}'>
      <div class="panel-heading">
        <div class="panel-ctrls button-icon" 
          data-actions-container="" 
          data-action-collapse='{"target": ".panel-body"}'
          data-action-expand=''
          data-action-colorpicker=''
          data-action-refresh='{"type": "circular", "url": "../../ajax-text.html"}'
          data-action-close=''
          >
        </div>
        <h2>Panel (non-draggable)</h2>
      </div>
      <div class="panel-editbox" data-widget-controls=""></div>
      <div class="panel-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius nam dolore ad est molestiae quasi qui id quas, corporis, laboriosam.</p>
      </div>
    </div>
    <div class="panel panel-warning" data-widget='{"id" : "wiget6"}'>
      <div class="panel-heading">
        <div class="panel-ctrls button-icon" 
          data-actions-container="" 
          data-action-collapse='{"target": ".panel-body"}'
          data-action-expand=''
          data-action-colorpicker=''
          data-action-refresh='{"type": "circular", "url": "../../ajax-text.html"}'
          data-action-close=''
          >
        </div>
        <h2>Panel</h2>
      </div>
      <div class="panel-editbox" data-widget-controls=""></div>
      <div class="panel-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius nam dolore ad est molestiae quasi qui id quas, corporis, laboriosam.</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="panel panel-brown" data-widget='{"id" : "wiget7"}'>
      <div class="panel-heading">
        <div class="panel-ctrls button-icon" 
          data-actions-container="" 
          data-action-collapse='{"target": ".panel-body"}'
          data-action-expand=''
          data-action-colorpicker=''
          data-action-refresh='{"type": "circular", "url": "../../ajax-text.html"}'
          data-action-close=''
          >
        </div>
        <h2>Panel</h2>
      </div>
      <div class="panel-editbox" data-widget-controls=""></div>
      <div class="panel-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius nam dolore ad est molestiae quasi qui id quas, corporis, laboriosam.</p>
      </div>
    </div>
    <div class="panel panel-purple" data-widget='{"id" : "wiget8"}'>
      <div class="panel-heading">
        <div class="panel-ctrls button-icon" 
          data-actions-container="" 
          data-action-collapse='{"target": ".panel-body"}'
          data-action-expand=''
          data-action-colorpicker=''
          data-action-refresh='{"type": "circular", "url": "../../ajax-text.html"}'
          data-action-close=''
          >
        </div>
        <h2>Panel</h2>
      </div>
      <div class="panel-editbox" data-widget-controls=""></div>
      <div class="panel-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius nam dolore ad est molestiae quasi qui id quas, corporis, laboriosam.</p>
      </div>
    </div>
    <div class="panel panel-midnightblue" data-widget='{"id" : "wiget9"}'>
      <div class="panel-heading">
        <div class="panel-ctrls button-icon" 
          data-actions-container="" 
          data-action-collapse='{"target": ".panel-body"}'
          data-action-expand=''
          data-action-colorpicker=''
          data-action-refresh='{"type": "circular", "url": "../../ajax-text.html"}'
          data-action-close=''
          >
        </div>
        <h2>Panel</h2>
      </div>
      <div class="panel-editbox" data-widget-controls=""></div>
      <div class="panel-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius nam dolore ad est molestiae quasi qui id quas, corporis, laboriosam.</p>
      </div>
    </div>
  </div>
</div>

</div> <!-- container-fluid -->
