title: bootstrap draggable panels from different columns
body: <p>I am having a hard time trying to create the following structure:</p>
  
  <pre><code>  &lt;div class="row"&gt;
      &lt;div class="col-lg-4"&gt;
        &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;
            Panel1!
          &lt;/div&gt;          
        &lt;div class="panel-body"&gt;
          Body Test
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col-lg-4"&gt;
        &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;
            Panel2!
          &lt;/div&gt;          
        &lt;div class="panel-body"&gt;
          Body Test
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>The problem that I am trying to tackle is that I would like to have the panels draggable. I would like to drag and drop between the two "col-lg-x" divs. I found some demos (<a href="http://www.bootply.com/dUQiGMggWO" rel="nofollow">http://www.bootply.com/dUQiGMggWO</a>) and it works just fine if all the panels are inside the same div and that div has the 'sortable' class plus using the javascript provided in that demo. However, if you separate the panels in different columns then what the script does is that it takes ALL the panels inside one column and tries to drag them all.</p>
  
  <p>Here is a jsfiddle demo of my problem: <a href="https://jsfiddle.net/Wy22s/719/" rel="nofollow">https://jsfiddle.net/Wy22s/719/</a></p>
  
  <p>Basically what I want is to drag and drop just one panel, not all the panels inside a column.</p>