当div被拖到另一个div附近时淡出div

Question

我有一个可拖动的div,可以放入一个可放置的div中.这很好用.可拖动的div包含一个span元素.我希望这个span元素在接近droppable div时淡出.

我有一个基于另一个答案的可拖动淡出/示例,适用于将元素拖动到窗口一侧的情况.我尝试修改它以满足我的需要,但它不会因某些原因而工作.

---

将红色方块拖到右侧.当你拖动它时,你会发现它会淡入/淡出.

演示小提琴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());
  }
});

---

我尝试修改它以具有上面解释的行为.

演示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

你需要获得这个ui职位。然后你需要计算与 div 的距离。

小提琴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) {

  }
});

编辑

如果您希望它更加渐进，那么获取起始位置，然后根据拖动位置计算百分比。

小提琴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) {

  }
});