title: Start drag with another element
body: <p>is it possible to start the drag with another element?</p>
  
  <p>For example: <a href="http://jsbin.com/igohod/edit#preview">http://jsbin.com/igohod/edit#preview</a></p>
  
  <p>I want to start dragging <code>#ct</code> when I click on the <code>#icon</code>. Notably, <code>#icon</code> is not descended from <code>#ct</code> in the DOM tree.</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>  &lt;div style="position:absolute; top:20px; left:10px;"&gt;
      &lt;div id="icon"&gt;Icon&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div style="position:absolute; top:20px; right:10px;"&gt;
      &lt;div id="ct"&gt;start this drag when you drag the icon&lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>js</strong></p>
  
  <pre><code>$(document).ready(function()
  {
    // $('#icon').draggable();
    $('#ct').draggable();
  });
  </code></pre>
  
  <p><br />
  <strong>UPDATE:</strong><br />
  New example with sortable<br />
  <a href="http://jsbin.com/igohod/8/edit#preview">http://jsbin.com/igohod/8/edit#preview</a></p>
  
  <p><strong>Solution</strong><br />
  <a href="http://jsbin.com/igohod/13/edit#preview">http://jsbin.com/igohod/13/edit#preview</a></p>