title: Drag with interact.JS
body: <p>How can I drag an object between two bootstrap columns, with Interact.JS? 
  See <a href="http://codepen.io/drumiriades/pen/dGrygg" rel="nofollow">http://codepen.io/drumiriades/pen/dGrygg</a>.</p>
  
  <pre><code> &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-4"&gt;      
                  &lt;div class="boardLeft"&gt;
                      &lt;p&gt;Left&lt;/p&gt;
                      &lt;div class="draggable"&gt;
                      &lt;p id="drag-1"&gt; dragg me&lt;/p&gt;
                          &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-8"&gt;
                  &lt;div class="boardRight"&gt;
                      &lt;p&gt;Right&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;!--/ row--&gt;
      &lt;/div&gt; &lt;!--/ container--&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I have an object with <code>ID=drag-1</code> that is draggable on the left column (<code>Class= boardLeft</code>) but I can't drag it to the right column (<code>Class= boardRight</code>). How can I drag it to the right column? </p>