title: Drag/Drop event only works once on dynamically added divs
body: <p>I'm using the drag and drop libraries found here: <a href="http://threedubmedia.com/code/event/drop/" rel="nofollow">http://threedubmedia.com/code/event/drop/</a>
  But I can't seem to get it to work more than once for elements added dynamically.</p>
  
  <p>I've made a jsfiddle to demonstrate the issue.</p>
  
  <p><a href="http://jsfiddle.net/Rn9gQ/" rel="nofollow">http://jsfiddle.net/Rn9gQ/</a></p>
  
  <p>Here you can click the button to add new divs, and you can drag the mouse to select some of them, but you can't select again after finishing dragging the mouse. Even if you make no selection the first time.</p>
  
  <p>Now sure where I'm going wrong, and any help would be greatly appreciated :)</p>
  
  <p>*Edit: Added code below</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8" /&gt;
  &lt;script src="http://threedubmedia.com/inc/js/jquery-1.7.2.js"&gt;&lt;/script&gt;
  &lt;script src="http://threedubmedia.com/inc/js/jquery.event.drag-2.2.js"&gt;&lt;/script&gt;
  &lt;script src="http://threedubmedia.com/inc/js/jquery.event.drag.live-2.2.js"&gt;&lt;/script&gt;
  &lt;script src="http://threedubmedia.com/inc/js/jquery.event.drop-2.2.js"&gt;&lt;/script&gt;
  &lt;script src="http://threedubmedia.com/inc/js/jquery.event.drop.live-2.2.js"&gt;&lt;/script&gt;
  &lt;title&gt;Testpage&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script type="text/javascript"&gt;
  jQuery(function($){
      $('#foo').click(function(){
          $('#main').append($('&lt;div class="drop"&gt;foo&lt;/div&gt;'))
      });
      $( document )
          .drag("start",function( ev, dd ){
              return $('&lt;div class="selection" /&gt;')
                  .css('opacity', .65 )
                  .appendTo( document.body );
          })
          .drag(function( ev, dd ){
              $( dd.proxy ).css({
                      top: Math.min( ev.pageY, dd.startY ),
                  left: Math.min( ev.pageX, dd.startX ),
                  height: Math.abs( ev.pageY - dd.startY ),
                  width: Math.abs( ev.pageX - dd.startX )
              });
          })
          .drag("end",function( ev, dd ){
              $( dd.proxy ).remove();
          })
  
          .on("dropstart", ".drop", function(){
              $(this).addClass("active");
          })
          .on("drop", ".drop", function(){
              $(this).toggleClass("dropped");
          })
          .on("dropend", ".drop", function(){
              $(this).removeClass("active");
          });
      $.drop({ multi: true });
  
  });
  &lt;/script&gt;
  
  &lt;h1&gt;Live adding of selectable elements&lt;/h1&gt;
  &lt;p&gt;Click and drag to select any number of dashed boxes.&lt;/p&gt;
  
  &lt;input type="button" id="foo" value="Add a box"/&gt;
  &lt;div id="main"&gt;&lt;/div&gt;
  
  &lt;style type="text/css"&gt;
  .selection {
      position: absolute;
      border: 1px solid #89B;
      background: #BCE;
      background-color: #BEC;
      border-color: #8B9;
      }
  .drop {
      float: left;
      border: 1px dashed #888;
      background: #EEE;
      text-align: center;
      padding: 20px;
      margin: 0 10px 10px 0;
      }
  .dropped {
      background-color: #EBC;
      border-color: #B89;
      }   
  .active {  
      background-color: #CEB;
      border-color: #9B8;
      }
  &lt;/style&gt;&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>