title: Dynamically setting an appendTo target
body: <p>Here is my <a href="http://jsfiddle.net/QyUn9/1/" rel="nofollow">fiddle</a>.</p>
  
  <p>In the jqueryUI draggable properties, how can I set the appendTo target dynamically, based on which element I am <strong>dropping</strong> my element ? </p>
  
  <h2>HTML:</h2>
  
  <pre><code>&lt;div id="header"&gt;&lt;/div&gt;
  &lt;div id="content"&gt;&lt;/div&gt;
  &lt;div id="footer"&gt;&lt;/div&gt;
  &lt;div id="assets"&gt;
       &lt;h4&gt;Drag these to the red box&lt;/h4&gt;
  
      &lt;div class="asset"&gt;A1&lt;/div&gt;
      &lt;div class="asset"&gt;A2&lt;/div&gt;
      &lt;div class="asset"&gt;A3&lt;/div&gt;
      &lt;div class="asset"&gt;A4&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>CSS:</h2>
  
  <pre><code>#header, #content, #footer {
      height: 150px;
      width: 50%;
      border: 1px solid red;
      position: relative;
      float: left;
      margin: 20px;
  }
  #assets {
      position: fixed;
      top: 0;
      right: 0;
  }
  .asset {
      border: 1px solid blue;
      width: 50px;
      height: 50px;
  }
  .drop {
      background-color: pink;
  }
  </code></pre>
  
  <h2>JavaScript:</h2>
  
  <pre><code>$('.asset').draggable({
      /*If we change appendTo to our #target dropzone, it works fine*/
      appendTo: 'body', //Try it with either #header, #content, #footer
      helper: 'clone'
  });
  $("#header, #content, #footer").droppable({
      hoverClass: "drop",
      drop: function (event, ui) {
          console.log('dropped');
          var element = $('&lt;div class="asset"&gt;' + ui.draggable.text() + '&lt;/div&gt;');
          element.css('top', ui.position.top);
          element.css('left', ui.position.left);
          element.css('position', 'absolute');
          $(element).appendTo(this);
      }
  });
  </code></pre>