javascript - jQueryアニメーションコールバックによって食べられるイベントオブジェクト

Question

イベントで関数に渡されるイベントオブジェクトに問題がありますdrop。私のコードでは、いくつかのアニメーションを実行し、オブジェクトを処理する適切な関数を呼び出す関数div#dropAreaによって、ドロップイベントが処理されていますか。後者はHTMLドキュメント内の他のdivによっても使用されるため、このアプローチは2つの別々の関数で必要です（コードを複製する必要はありません）。最初のものは、いくつかの「ウェルカム」テキストを非表示にするために1回だけ使用されます。 firstDropdropFromDesktope.dataTransfer.files

通常、このメカニズムを使用すると、ファイルをデスクトップからドラッグして、私のWebサイトの領域にドロップできます。

これが（ショートカットで）どのように見えるかです：

function firstDrop(ev) {
    var $this = $(this);

    //when I call the function here, it passes the event with files inside it
    //dropFromDesktop.call($this, ev);

    $this.children('.welcomeText').animate({
        opacity: '0',
        height: '0'
    }, 700, function() {
        $('#raw .menu').first().slideDown('fast', function() {
            //when I call the function here, it passes the event, but 'files' object is empty
            dropFromDesktop.call($this, ev);
        });
    });
}

function dropFromDesktop(ev) {
    var files = ev.originalEvent.dataTransfer.files;
    (...) //handling the files
}

$('#dropArea').one('drop', firstDrop);
$('some_other_div').on('drop', dropFromDesktop);

問題はjQuery.animationのコールバックのどこかにあります-その中で関数を呼び出すと、イベントオブジェクトは正しく渡されますが、dataTransferからのファイルオブジェクトは空です！

スクリプト全体が内部に配置されている$(document).ready(function() { ... });ので、関数宣言の順序は重要ではないと思います。