Fade out div, поскольку он перетаскивается рядом с другим div

Question

У меня есть перетаскиваемый div, который можно отбросить в droppable div. Это прекрасно работает. Перетаскиваемый div содержит элемент span. Я бы хотел, чтобы этот элемент span исчезал, когда он приближается к раскрывающемуся div.

У меня есть перетаскиваемый fadeout/in example, основанный на другом ответе, который применяется к тому, когда вы перетаскиваете элемент в сторону окна. Я пробовал модифицировать это, чтобы соответствовать моим потребностям, но это не sem, чтобы работать по какой-то причине.

---

Перетащите красный квадрат в нужную сторону. вы заметите, что оно исчезает, когда вы его перетаскиваете.

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

---

Моя попытка модифицировать это, чтобы поведение было объяснено выше.

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

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

    } 
});