title: jQuery Sortable in tab content moved to another content
body: <p>I am trying to do jQuery sortable with items to be moved from tab contents to another div. It it working mostly fine, but the problem I am having is that I would like the item to be back to tab from which it was taken.</p>
  
  <p>So let say that I have got tabs:</p>
  
  <ul>
  <li>Shipping Address with items:
  
  <ul>
  <li>Street 1</li>
  <li>Street 2</li>
  <li>City</li>
  <li>Country</li>
  </ul></li>
  <li>Attributes with items:
  
  <ul>
  <li>Industry</li>
  <li>Types</li>
  <li>Full Name</li>
  </ul></li>
  </ul>
  
  <p>The tab content is taking 50% of width on left and 50% of width on right is the div block to were I want to drop the items. If I would like to remove the item from div block, it should come back to the related tab, so e.g. Industry cannot go back to Shipping Addres , it needs to go to Attributes.</p>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/epxp5L48/" rel="nofollow noreferrer">http://jsfiddle.net/epxp5L48/</a></p>
  
  <p>The screen how it looks like
  <img src="https://i.stack.imgur.com/pMBUL.jpg" alt="enter image description here">
  My HTML code:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-xs-6"&gt;
          &lt;ul class="nav nav-tabs" role="tablist"&gt;
              &lt;li class="active"&gt;&lt;a href="#Attributes" data-toggle="tab"&gt;Attributes&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#InvoiceAddress" data-toggle="tab"&gt;InvoiceAddress&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#ShippingAddress" data-toggle="tab"&gt;ShippingAddress&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div id="fields-draggable" class="tab-content"&gt;
              &lt;div class="tab-pane connectedSortable ui-sortable active" id="Attributes"&gt;
                  &lt;button id="field_industry" class="btn btn-primary btn-lg btn-block ui-sortable-handle"&gt;industry&lt;/button&gt;
                  &lt;button id="field_types" class="btn btn-primary btn-lg btn-block ui-sortable-handle"&gt;types&lt;/button&gt;
                  &lt;button id="field_full_name" class="btn btn-primary btn-lg btn-block ui-sortable-handle"&gt;full_name&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="tab-pane connectedSortable ui-sortable" id="InvoiceAddress"&gt;
                  &lt;button id="field_street1" class="btn btn-primary btn-lg btn-block ui-sortable-handle"&gt;street1&lt;/button&gt;
                  &lt;button id="field_street2" class="btn btn-primary btn-lg btn-block ui-sortable-handle"&gt;street2&lt;/button&gt;
                  &lt;button id="field_id" class="btn btn-primary btn-lg btn-block ui-sortable-handle"&gt;id&lt;/button&gt;
                  &lt;button id="field_street3" class="btn btn-primary btn-lg btn-block ui-sortable-handle"&gt;street3&lt;/button&gt;
                  &lt;button id="field_postcode" class="btn btn-primary btn-lg btn-block ui-sortable-handle"&gt;postcode&lt;/button&gt;
                  &lt;button id="field_city" class="btn btn-primary btn-lg btn-block ui-sortable-handle"&gt;city&lt;/button&gt;
                  &lt;button id="field_stateId" class="btn btn-primary btn-lg btn-block ui-sortable-handle"&gt;stateId&lt;/button&gt;
                  &lt;button id="field_countryId" class="btn btn-primary btn-lg btn-block ui-sortable-handle"&gt;countryId&lt;/button&gt;
                  &lt;/div&gt;
              &lt;div class="tab-pane connectedSortable ui-sortable" id="ShippingAddress"&gt;
                  &lt;button id="field_id" class="btn btn-primary btn-lg btn-block ui-sortable-handle"&gt;id&lt;/button&gt;
                  &lt;button id="field_street1" class="btn btn-primary btn-lg btn-block ui-sortable-handle"&gt;street1&lt;/button&gt;
                  &lt;button id="field_street2" class="btn btn-primary btn-lg btn-block ui-sortable-handle"&gt;street2&lt;/button&gt;
                  &lt;button id="field_street3" class="btn btn-primary btn-lg btn-block ui-sortable-handle"&gt;street3&lt;/button&gt;
                  &lt;button id="field_postcode" class="btn btn-primary btn-lg btn-block ui-sortable-handle"&gt;postcode&lt;/button&gt;
                  &lt;button id="field_city" class="btn btn-primary btn-lg btn-block ui-sortable-handle"&gt;city&lt;/button&gt;
                  &lt;button id="field_stateId" class="btn btn-primary btn-lg btn-block ui-sortable-handle"&gt;stateId&lt;/button&gt;
                  &lt;button id="field_countryId" class="btn btn-primary btn-lg btn-block ui-sortable-handle"&gt;countryId&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-6"&gt;
          &lt;div id="fields-sortable" class="connectedSortable well ui-sortable" style="min-height: 40px;"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and jQuery UI code:</p>
  
  <pre><code>$("#fields-sortable, #Attributes" ).sortable({
      connectWith: ".connectedSortable",
      placeholder: "btn btn-default btn-lg btn-block",
      cancel: ''
  });
  $("#fields-sortable, #InvoiceAddress" ).sortable({
      connectWith: ".connectedSortable",
      placeholder: "btn btn-default btn-lg btn-block",
      cancel: ''
  });
  $("#fields-sortable, #ShippingAddress" ).sortable({
      connectWith: ".connectedSortable",
      placeholder: "btn btn-default btn-lg btn-block",
      cancel: ''
  });
  $( "#fields-sortable" ).sortable({
      update: function (event, ui) {
          var data = $(this).sortable( "serialize");
          console.log(data);
      }
  });
  </code></pre>