2

私はさらに別のドラッグアンドドロップファイルアップローダーを構築しています。私がやりたいのは、ドラッグが開始されたときにページ上のドロップ領域を強調表示して、ユーザーがファイルの移動先を認識できるようにすることです。この場合、インターフェースはそれをすぐに明示的にしません。これは望ましいことです...

ユーザーがすでにその上にいるときにドロップゾーンを強調表示することは問題ありませんが、ユーザーがドラッグしているが、まだドロップ可能な領域にいないときに通知を受け取りたいのです。

ドラッグされているHTML要素で発生するため、イベントを使用できませんdragstart。この場合は、ユーザーのデスクトップなどからのファイルです。私も次のことを試しました：

$(document.body).on('dragenter', changeTheCSSClass)
                .on('dragleave', changeItBackAgain);

ただし、EnterイベントとLeaveイベントは、カーソルが置かれているネストされた要素ごとに発生するため、大量のイベントが発生し、クラスが継続的に切り替わります。絶対に私がそこに欲しいものではありません。

何か案は？

4

2 に答える 2

0

誰も投稿していないので、私はこれを投稿しています。安定しておらず、100％動作していませんが、動作している場合があります。

changeback = 2;
changedback = true;
$(document)
    .off('dragenter dragleave')
    .on('dragenter', function (e) {
    setTimeout(function () {
        window.clearTimeout(changeback);
        changeback = 0;
        console.log('dragenter', e.target);
        if (changedback) document.getElementById('nav-askquestion').style.color = '#bc0000';
        changedback = false;
    }, 10);
})
    .on('dragleave', function (e) {
    console.log('dragleave', e.target);
    if (changeback == 0) {
        changeback = window.setTimeout(function () {
            console.log('changed back');
            document.getElementById('nav-askquestion').style.color = '#FFFFFF';
            changedback = true;
        }, 15);
    }
});

このページ自体に適用されます。また、にフラグを設定して、社内ドラッグをキャンセルする必要がありますdragstart。

名前dragenterとdragleave実際にあるべきでdragoverあり、dragoutそれはそうです:)

あなたの最後はどうですか？

于 2012-10-25T13:04:31.260 に答える