Javascript 淡出div，因为它'；他被拖到另一个潜水舱附近

我有一个可拖拽的潜水器，可以放到一个可拖拽的潜水器里。这个很好用。可拖动div包含

span

元素。我希望这个

span

元素在接近可拖放div时淡出

我有一个基于另一个答案的可拖动淡出/淡入示例，它适用于将元素拖动到窗口一侧的情况。我试图修改它以满足我的需要，但由于某些原因，它无法正常工作。

---

将红色方形拖到右手边。拖动它时，您会注意到它会淡入/淡出

演示小提琴

---

我试图对此进行修改，以便对上述行为进行解释

演示

---

您需要获得

ui

位置。然后你需要用距离div的距离来计算

拨弄

编辑

如果您希望它更平缓，则获取开始位置，然后根据拖动位置计算百分比

拨弄

---

哇！谢谢我开始觉得这是不可能的。有没有办法让淡入淡出更为缓慢？再次感谢。编辑了我的答案，使其更加渐变

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

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

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

  }
});

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

  }
});