CODEWITHSUNDEEP
javascriptjqueryjquery-ui
user5483305
user5483305

Reputation:

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);
  }
});

Upvotes: 5

Views: 510

Answers (1)

Kevin Lynch
Kevin Lynch

Reputation: 24723

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) {

  }
});

Upvotes: 2

Related Questions