title: Do jQuery-ui draggable and sortable "delegate" when the DOM changes (i.e. in Meteor)?
body: <p>I'm building a <a href="http://www.meteor.com/" rel="nofollow">Meteor</a> app for which I'd like to add drag-and-drop interaction. If you've worked with meteor, you probably know that this is quite tricky due to Meteor's dynamic nature.</p>
  
  <p>I'm trying to use this awesome project as an example: <a href="http://minitrello.meteor.com/" rel="nofollow">http://minitrello.meteor.com/</a>. As you can see, it's a great replication of many features of <a href="https://trello.com/" rel="nofollow">Trello</a> itself in not much code.</p>
  
  <p>I have a series of related questions about the <code>draggable</code> and <code>sortable</code> widgets in jQuery-ui:</p>
  
  <ul>
  <li>The <a href="http://jqueryui.com/draggable/" rel="nofollow">documentation</a> is a bit confusing on whether you call <code>draggable</code> on a selector of the elements you want to drag or container of the elements. I've seen code examples for both. The minitrello example calls <code>sortable</code> on the <code>ul</code> containing a bunch of <code>li</code> elements, and that's it.</li>
  <li>If using <code>draggable</code> on the container, do the drag events get delegated to new child elements that are added to the DOM? Or does it only work for existing elements? This delegation seems to be the case in the minitrello example but I'm wondering if it's a special case.</li>
  <li>Any other suggestions for properly using drag and drop in highly dynamic webpages? For example, I imagine in Meteor that we'd always want to clone and use a helper instead of the original element itself, which is subject to re-rendering and changes at any time.</li>
  </ul>