title: Jquery Drag and Drop on Ajax loaded Div
body: <p>I want to be able to drag an element on the page into a droppable element inside an ajax loaded div. I can get the code to work when I place the droppable element in the regular page but not when i have the same element on the ajax loaded div. Im pretty sure its because of the way I'm calling scripts and how they load on the dom, but I can't find the solution. Note: I have tried calling the code which loads the ajax content before calling jquery ui but that didn't work either.
  Here is how I'm calling everything, I removed the extraneous code for brevity.</p>
  
  <p>main page</p>
  
  <pre><code>&lt;head&gt;
  &lt;scripts -- jquery, jquery ui&gt;
  &lt;script&gt;
    $(document).ready(function(){
        $( "#site-preview" ).load( "/site/preview" );
     });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="draggable&gt;&lt;img src=//etc/&gt; &lt;/div&gt;
  
  //if I put this div here, I can drop to it, so i know the drop code works.
  // &lt;div class="droppable col-md-2" style="height:100px;border:1px solid gray"&gt;&lt;p&gt; &lt;/p&gt;&lt;/div&gt;
  
  &lt;div id="site-preview"&gt;&lt;/div&gt;
  
  &lt;script&gt;
    $(function() {
      $( ".draggable" ).draggable({
        helper:'clone',
        appendTo: 'body',
        scroll: false
       });
  $( ".droppable" ).droppable({
        drop: function( event, ui ) {
          $( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
        }
      });
    });
    &lt;/script&gt;
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p>ajax loaded code</p>
  
  <pre><code>&lt;div class="droppable col-md-2" style="height:100px;border:1px solid gray"&gt;
    &lt;p&gt; &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>