title: How do I make draggable divs with different functions?
body: <p>I have four divs that are draggable. And a div where I drop the daggable divs. My code is basically just an API I've downloaded and modify a little form jQuery's sites.</p>
  
  <p>My problem is that all the divs have the same function when they are dropped. How can I make individual functions to individual divs?</p>
  
  <p>It looks like this:</p>
  
  <pre><code>$(function() {
  $("#draggable").draggable({ revert: "invalid" });
  $("#draggable2").draggable({ revert: "invalid" });
  $("#draggable3").draggable({ revert: "invalid" });
  $("#draggable4").draggable({ revert: "invalid" });
  
  $("#droppable").droppable({
      activeClass: "ui-state-hover",
      hoverClass: "ui-state-active",
      drop: function(event, ui) {
          if (document.getElementById('draggable')){
              window.location.replace("http://www.example.com");      
              }
          if (document.getElementById('draggable2')){
              window.location.replace("http://www.example2.com");     
              }
          if (document.getElementById('draggable3')){
              window.location.replace("http://www.example3.com");     
              }
          if (document.getElementById('draggable4')){
              window.location.replace("http://www.example4.com");     
              }
          }
      });
  });
  </code></pre>
  
  <p>No luck in this code. Any ideas?</p>
  
  <p>Thanks in advance!</p>
  
  <p>Regards, VG</p>