steve steve - 4 months ago 13
Javascript Question

Fade out div as it's dragged near another div

I have a draggable div that can be dropped into a droppable div. This works fine. The draggable div contains a

span
element. I would like this
span
element to fade out as it approaches the droppable div.

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.


Drag the red sqaure to the right handside. you will notice it fades in/out as you drag it.

Demo Fiddle 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 of modifying this to have the behaviour 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

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 would like it more gradual, then get the start position and then calculate the percentage based on the dragging 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) {

  }
});