JQ+Bootstrap

JQ UI sortable + dropable and Bootstrap Tabs

by cr8s .net

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.3/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/css/bootstrap.min.css">
<div id="external-tab">
    <ul id="sortable0" class="connectedSortable ui-helper-reset">
      <li class="ui-state-default">ExItem 1</li>
      <li class="ui-state-default">ExItem 2</li>
      <li class="ui-state-default">ExItem 3</li>
    </ul>
  </div>

<div id="tabs" class="tabbable">
  <ul id="myTab" class="nav nav-tabs">
    <li><a href="#tabs-1" data-toggle="tab">Nunc tincidunt</a></li>
    <li><a href="#tabs-2" data-toggle="tab">Proin dolor</a></li>
  </ul>
  <div class="tab-content">
      <div id="tabs-1" class="tab-pane">
        <ul id="sortable1" class="connectedSortable ui-helper-reset">
          <li class="ui-state-default">Item 1</li>
          <li class="ui-state-default">Item 2</li>
          <li class="ui-state-default">Item 3</li>
        </ul>
      </div>
      <div id="tabs-2" class="tab-pane">
        <ul id="sortable2" class="connectedSortable ui-helper-reset">
          <li class="ui-state-highlight">Item 1</li>
          <li class="ui-state-highlight">Item 2</li>
          <li class="ui-state-highlight">Item 3</li>
        </ul>
      </div>
    </div>
</div>

CSS

#sortable0 li,#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }

JavaScript

$(function() {
  $('.tab-pane > ul').sortable().disableSelection();
 
  var 
    $tabs     = $('#tabs'),
    $tabItems = $('#myTab > li', $tabs);

  $('#myTab a:last').tab('show');
  $tabItems.droppable({
    accept: ".connectedSortable li",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
      var 
        $item = $(this),
        href  = $item.children('a').attr('href'),
        $list = $(href).find('.connectedSortable');
      console.log($list);
      $list.append($('<li />').html(ui.draggable.html()).attr('class', ui.draggable.attr('class')));
      $list.closest('.tab-pane').addClass('active').siblings().removeClass('active');
      $item.addClass('active').siblings().removeClass('active');
    }// drop(event, ui)
  });// $tabItems.droppable()
  $('#external-tab > ul > li').draggable({
    appendTo: 'body',
    helper: 'clone'
  });
});// end of doc ready