title: Set conditions for draggable objects when dropped - Jquery - UI
body: <p>Let's say we have multiple draggable elements in one page and multiple droppable targets. Each draggable element has only one droppable target. My question is: how to test if the right element is being dropped on it's right target.
  Here is an example fiddle: <a href="http://jsfiddle.net/D25Rt/" rel="nofollow">http://jsfiddle.net/D25Rt/</a></p>
  
  <p>this is the code from the example:</p>
  
  <pre><code>$("#draggable-red, #draggable-blue, #draggable-green").draggable({ revert: "invalid", containment: "#content"});
  
  $("#droppable-red").droppable({
      accept: "#draggable-red",
      activeClass: "ui-state-hover",
      hoverClass: "ui-state-active",
      drop: function(event, ui) {
          $(this).addClass("ui-state-highlight").find("p").html("Touch down!");
      }
  });
  
  $("#droppable-blue").droppable({
      accept: "#draggable-blue",
      activeClass: "ui-state-hover",
      hoverClass: "ui-state-active",
      drop: function(event, ui) {
          $(this).addClass("ui-state-highlight").find("p").html("Touch down!");
      }
  });
  
  $("#droppable-green").droppable({
      accept: "#draggable-green",
      activeClass: "ui-state-hover",
      hoverClass: "ui-state-active",
      drop: function(event, ui) {
          $(this).addClass("ui-state-highlight").find("p").html("Touch down!");
      }
  });
  </code></pre>
  
  <p>To be more specific, regarding the previous example, if I drag the blue ball over the red box, when I release the blue ball I want to display an alert( something like "Wrong box..."). I'm new to jQuery UI, can someone give me some hints on how and where should i do that? in the <strong>accept</strong> option or in the <strong>drop</strong> option ? </p>