title: jquery removing items from array after they are added in drag area
body: <p>I'm using jquery ui for dragging items, so I have an array similar to:</p>
  
  <pre><code>var animals = ['cat', 'dog', 'monkey'];
  var output = [];
  for (var i = 0; i &lt; animals.length; i++) {
      output.push('&lt;p&gt;' + animals[i] + '&lt;/p&gt;');
  }
  $('#list').html(output.join("")); 
  </code></pre>
  
  <p>So I get this on the page, what I want to do is if I drag "cat" to dragging zone, I would like to remove it from the array automatically. New array should have only "dog" and "monkey" in it and that should be showed on the page.</p>
  
  <pre><code> &lt;div class="col-xs-2"&gt;
     &lt;a href="#"&gt;
        &lt;img id="drag-cat" class="drag-img" src="images/cat.png" alt="" /&gt;
     &lt;/a&gt;  
   &lt;/div&gt;
  </code></pre>
  
  <p>That is my html part, so when I drag it and this item is showed in that drag div, I would like to update array.</p>
  
  <p>Any suggestions?</p>
  
  <p>Thanks.</p>
  
  <p>EDIT:
  <a href="https://jsfiddle.net/th01sw16/" rel="nofollow">JS Fiddle</a></p>