Fade out div as it's dragged near another div
<p>I have a draggable div that can be dropped into a droppable div. This works fine. The draggable div contains a <code>span</code> element. I would like this <code>span</code> element to fade out as it approaches the droppable div.</p>

<p>I have a draggable fadeout/in example based on another answer, which applies to when you drag the element to the side of the window. I tried modifying this to fit my needs but it doesn't sem to be working for some reason.
<hr />
Drag the red sqaure to the right handside. you will notice it fades in/out as you drag it.</p>

<p><strong>Demo Fiddle <a href="http://jsfiddle.net/EybmN/32/" rel="noreferrer">http://jsfiddle.net/EybmN/32/</a></strong></p>

<pre><code>$('#draggable').draggable({
  drag: function(event, ui) {
  console.log(ui.helper.find('span'));
    ui.helper.find('span').css('opacity', 1 - ui.position.left / $(window).width());
  }
});
</code></pre>

<p><hr />
My attempt of modifying this to have the behaviour explained above.</p>

<p><strong>Demo <a href="http://jsfiddle.net/EybmN/30/" rel="noreferrer">http://jsfiddle.net/EybmN/30/</a></strong></p>

<pre><code>$('#draggable').draggable({
  drag: function(event, ui) {
  console.log(ui.helper.find('span'));
    $el = $('.droppable.blue');
    var bottom = $el.position().top + $el.outerHeight(true);
    var $span = ui.helper.find('span');
   $span.css('opacity', 1 - $span.top / bottom);
  }
});
</code></pre>