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

Question

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

我有一个基于另一个答案的可拖动淡出/输入示例，它适用于将元素拖动到窗口一侧的情况。我尝试修改它以满足我的需要，但由于某种原因它似乎不起作用。

---

将红色方 block 拖到右侧。当您拖动它时，您会注意到它淡入/淡出。

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

---

我尝试对此进行修改以实现上述行为。

演示 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 的距离来计算它。

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

  }
});

编辑

如果你想要更渐进的，那么获取起始位置，然后根据拖动位置计算百分比。

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

  }
});