2

Gmail では、メールの作成中にファイルを作成エリア (エディタ) にドラッグしてファイルを添付すると、作成エリアがドラッグ アンド ドロップエリアに変わり、ファイルをアップロードできます。

次のことを行う方法を知りたいです。

ユーザーが要素の上にファイルをドラッグしたときに、HTML 要素をドラッグ アンド ドロップ ファイル アップロード エリアに変える方法は?

ファイルのアップロード領域をドラッグ アンド ドロップするには、要素を有効にする必要はありません。ただし、ドラッグ アンド ドロップ ファイル アップロード エリアとして機能する別の HTML 要素が存在する可能性があり、ユーザーがファイルを最初の要素にドラッグしたときに、これを最初の要素の上に表示する必要があります。そのため、ユーザーがいつファイルをドラッグして html 要素に移動したかを知る方法を知る必要があります。これはmouseover、ドラッグされたファイルのイベントのようなものです。このイベントは何ですか？

4

3 に答える 3

4

ファイルをドラッグ アンド ドロップしてアップロードできるようにする jQuery プラグインがあります... jQuery File Upload Demoを探してください

必要なことを行うには、mouseInイベント処理を追加する必要があり、イベントで次のようにします。

function draggingIn(e) {

   var count =  e.dataTransfer.files.length; (like Chamika Sandamal function)

   if (count > 0) {
        //A file is dragged
        $('droppable').addClass('showBox');
   }
}

最近のブラウザーでは、HTML5 のドラッグ可能な機能を使用できます。ここを参照してください。

次のようになります: fiddleいくつかのテストを行いました。ドラッグ イベントを探すだけです。

于 2013-04-03T07:18:59.903 に答える
0

自分で何か試してみましたか？html5demos.com のサンプル

于 2013-04-03T07:18:59.307 に答える
-3

Gmail のドラッグ アンド ドロップはこの概念で行われるため、このサイトを参照してください。

https://developer.mozilla.org/en-US/docs/Web/Events/drag

https://developer.mozilla.org/en-US/docs/Web/Events/drop

質問がある場合は、以下に投稿できます

于 2014-08-11T14:06:13.080 に答える