Question

我有一个可拖动的div，可以放入一个可放置的div中。这很好用。可拖动的div包含span元素。我希望这个span元素在接近droppable 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());
  }
});

<小时/> 我试图将其修改为具有上述行为。

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

  }
});

淡出div，因为它被拖到另一个div附近

1 个答案: