Fade a div as it drags alongside another div

Question

I have a draggable div that can be dropped in a droppable div. It works great. The draggable div contains the span element. I would like this span element to disappear as it approaches the dropdown div.

I have a draggable fadeout / in example based on another answer that applies to when you drag an item towards the window. I tried modifying this to fit my needs, but it is not sem, to work for some reason.

---

Drag the red square to the desired side. You will notice that it fades out when you drag it.

Demo script http://jsfiddle.net/EybmN/32/

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

---

My attempt is to modify this so that the behavior is explained above.

Demo http://jsfiddle.net/EybmN/30/

 $('#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); } }); 

Answer 1

You need to get the ui position. Then you need to calculate that with the distance from the div.

Fiddle http://jsfiddle.net/EybmN/34/

 $('#draggable').draggable({ connectToDroppable: '.droppable', revert: 'invalid', drag: function(event, ui) { var $span = ui.helper.find('span'); var opacity = ((ui.helper.offset().top - ui.helper.outerHeight()) - ($('.droppable.blue').offset().top + $('.droppable.blue').outerHeight())) / 100; $span.css('opacity', opacity); } }); $(".droppable").droppable({ accept: '#draggable', drop: function(event, ui) { } }); 

Edit

If you want a more gradual, then get the starting position, and then calculate the percentage based on the drag position.

Fiddle http://jsfiddle.net/EybmN/35/

 var startPos = 0; $('#draggable').draggable({ connectToDroppable: '.droppable', revert: 'invalid', drag: function(event, ui) { if(!startPos) startPos = ui.helper.offset().top; var $span = ui.helper.find('span'); var opacity = (ui.helper.offset().top - (ui.helper.outerHeight()*2.5) - ($('.droppable.blue').offset().top + $('.droppable.blue').outerHeight())) / startPos + .5; $span.css('opacity', opacity); } }); $(".droppable").droppable({ accept: '#draggable', drop: function(event, ui) { } });