divを別のdivの近くでドラッグしているようにフェードアウト

Question

私はドラッグ可能なdivをドロップ可能なdivにドロップすることができます。これは正常に動作します。ドラッグ可能なdivには、span要素が含まれています。私はこのspan要素がドロップ可能divに近づくにつれてフェードアウトしたいと思います。

ドラッグ可能なフェードアウトは、別の回答に基づいています。これは、要素をウィンドウの横にドラッグしたときに適用されます。私は私のニーズに合わせてこれを修正しようとしましたが、何らかの理由で動作していないのです。

---

赤いsqaureを右手側にドラッグします。それをドラッグすると、フェードイン/フェードすることがわかります。

デモフィドルは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) { 

    } 
});