Showing a div using the droppable function

Question

My code works as planned, except for one thing. When you click on the darkgray boxes the orange box appears with show();.

However, I want the purple box to appear when you drop the blue draggable div on the orange boxes. This doesn't seem to work.

My question to you is why doesn't this work in the drop function when it does work a few lines above, and how can I make this work?

I tried placing the purple div inside the orange one, but then it only shows once... Any help much appreciated, let me know when you don't understand me.

JsFiddle (problem is in the droppable function)

jQuery

$('.lightgray').hover(

function() {
    $(this).find('.darkgray').fadeTo('fast', 0.5);
}, function() {
    $(this).find('.darkgray').fadeOut('fast');
});

$('.lightgray').bind("click", function(event) {

    $(this).find('.orange').show();
    $(this).unbind('hover');
});


$("#draggable_blue").draggable({

    revert: true
});


$('.orange').hover(

function() {
    $(this).find('.darkgray').fadeTo('fast', 0.5);
}, function() {
    $(this).find('.darkgray').fadeOut('fast');
});


$(".orange").droppable({
    drop: function() {
         $(this).find('.purple').show();
    }
});

Html

<div id="wrapper">
<div id="container">

<div class="lightgray">

     <div class="darkgray">
     </div>

     <div class="orange">
     </div>
     <div class="purple">
     </div>

</div>

<div class="lightgray">

   <div class="darkgray">

    </div>
      <div class="orange">

    </div>
</div>
<div class="lightgray">

   <div class="darkgray">
    </div>
       <div class="orange">

    </div>
</div>
<div class="lightgray">
   <div class="darkgray">

    </div>
       <div class="orange">

    </div>
</div>
   <div class="orange">

    </div>
<div class="lightgray">

    <div class="darkgray">

    </div>
    <div class="orange">

    </div>
</div>
 <div class="lightgray">

   <div class="darkgray">
      </div>
        <div class="orange">

    </div>

</div>

<div class="lightgray">

    <div class="darkgray">

    </div>
<div class="orange">

    </div>
    </div>


<div class="lightgray">
    <div class="darkgray">

    </div>

 <div class="orange">

    </div>
</div>


       <div id="menu">
          <div id="draggable_blue">
          </div>
       </div>
</div>
</div>

Answer 1

try this

$(this).parent().find('.purple').show();

here is the fiddle..

http://jsfiddle.net/uTLUm/2/

.find() gets the descendants of each element in the current set of matched elements. so with $(this).find(), you were searchin inside div.orange, since your div.purple is outside. it won't be able to find div.purple.

i added the parent() so that it searched inside the current div.lightgray and hence find the purple div...