title: jquery ui sortable connecwith by children type
body: <p>I don't know how to solve this issue:</p>
  
  <p>I have an 3 types of containers:</p>
  
  <p>1.- <strong>.global_container</strong>: children can be: .zona_completa, .zona_izquierda, .zona_derecha</p>
  
  <p>2.- <strong>global_container_2col</strong>: children only can be: .zona_izquierda</p>
  
  <p>3.- <strong>global_container_1col</strong>: children only can be: .zona_derecha</p>
  
  <p>I should move from "global_container_2col" and "global_container_1col" to "global_container"</p>
  
  <p>But I should ONLY move from "global_container" to "container_container_2col" if the item is ".zona_izquierda"</p>
  
  <p>and</p>
  
  <p>I should ONLY move from "global_container" to "container_container_1col" if the item is ".zona_derecha".</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="global_container_2col" data-type="global_container"&gt;
    &lt;div class="zona_izquierda zone" data-type="zone"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="global_container_1col" data-type="global_container"&gt;
    &lt;div class="zona_derecha zone" data-type="zone"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="global_container" data-type="global_container"&gt;
    &lt;div class="zona_izquierda zone" data-type="zone"&gt;
    &lt;/div&gt;
    &lt;div class="zona_derecha zone" data-type="zone"&gt;
    &lt;/div&gt;
    &lt;div class="zona_completa zone" data-type="zone"&gt;
    &lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('body').sortable(
  {
    items: 'div[data-type="global_container"]'
  });
  
  $('.global_container').sortable(
  {
      connectWith: 'div[data-type="global_container"]',
    items: 'div[data-type="zone"]'
  });
  
  $('.global_container_2col').sortable(
  {
      connectWith: '.global_container_2col, .global_container',
    items: '.zona_izquierda'
  });
  
  $('.global_container_1col').sortable(
  {
      connectWith: '.global_container_1col, .global_container',
    items: '.zona_derecha'
  });
  </code></pre>
  
  <p>DEMO: <a href="https://jsfiddle.net/kwrx4182/3/" rel="nofollow">https://jsfiddle.net/kwrx4182/3/</a></p>