title: Why do all of my JQuery drag and drop objects disappear when I try to drop them into each other?
body: <p>I've been attempting to allow x-amount of dynamically generate div boxes to drag and drop into each other using JQuery.</p>
  
  <p>The problem is that whenever I attempt to drag one into another, every box I have generated, whether involved in the action or not, disappears.</p>
  
  <p><a href="http://jsfiddle.net/Bladetrick/J5WAf/4/" rel="nofollow">Here's the fiddler link</a>.</p>
  
  <p>And here is the code:</p>
  
  <pre><code>$('#btnOpen').click(function() { OnClientDroppedHandler(); });    
  
  
  function OnClientDroppedHandler() {
  
      $('#divWorkSpace').append('&lt;div class="divLoc"&gt;&lt;p&gt; I am a box.  Try to Drag and Drop me into another box &lt;/p&gt;&lt;/div&gt;');
      $('.divLoc').resizable();
  
      $('.divLoc').droppable({
          accept: '.divLoc',
          over: function () {
                  $('.divLoc').appendTo($(this));
                  $(this).animate({ 'border-width': '5px',
                      'border-color': '#0f0'
                  }, 500);
                  $('.divLoc').draggable('option', 'containment', $(this));
          }
      });
  
      $('.divLoc').draggable({
          containment: $('.divWorkSpace')
      });
      return false;      
  };
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>.divLoc
  {
  width:100px;
  height:100px;
  background-color: White;
  border: 1px solid black;
  z-index: 100;
  }
  </code></pre>
  
  <p>The Markup:</p>
  
  <pre><code>&lt;input id="btnOpen" type="button" value="Click to Open New Dialog" /&gt; -- Generate at least two dialogs and try to drag and drop them into each other --
  &lt;div id="divWorkSpace" style="height: 500px; width: 700px; background-color: Gray;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Appreciate the help</p>