title: Knockout & JQueryUI Drag - What is causing this element to not be draggable?
body: <p>I'm trying to make a list item draggable in a project that is using Knockout.js.</p>
  
  <p>I'm using the code below, and as you can see it is very simple:</p>
  
  <pre><code>&lt;div id="room-view" &gt;
      &lt;ul data-bind="foreach: rooms"&gt;                     
          &lt;li data-bind="text: name" class="draggable room-shape"&gt;&lt;/li&gt;                   
      &lt;/ul&gt;               
  &lt;/div&gt; 
  
  &lt;script type="text/javascript"&gt;
      $(function() {
          $( ".draggable" ).draggable();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>The list of 'room' renders just fine, but none of the items are draggable.  However, if I apply the 'draggable' class to any other element on the page - it becomes draggable.  Even if they are other list items.  The only difference is that these list items are being created through the 'foreach' binding.  </p>
  
  <p>Can anyone spot what may be causing this to not function correctly?</p>