Draggable関數(shù)を?qū)g裝する重要な手順には次のものがあります。1。HTML5のドラッグ可能屬性を使用して、要素をドラッグ可能にする。 2. Dragstartイベントを介してドラッグデータを設定します。 3.ターゲット領域のドラゴオーバーとドロップのイベント処理配置ロジックを聞いてください。 4.ファイルリストオブジェクトを使用して、ドラッグアンドドロップアップロードを?qū)g現(xiàn)します。 HTML5ネイティブドラッグアンドドロップAPIは、Dragstart、Dragover、Dropなどの一連のイベント制御プロセスを使用します。ドラッグ可能なカスタム要素を設定する必要があります= "True"を設定し、Dragstartイベントをバインドし、SetData（）を呼び出してデータを保存します。ドラッグアンドドロップを処理するとき、ドロッグオーバーのデフォルトの動作をブロックしてドロップイベントをトリガーし、getData（）を介してデータを取得して要素の動きまたはファイル処理を完了する必要があります。ファイルをアップロードするときは、パスへの直接アクセスを避けるために、datAtransfer.filesのファイルリストを読み取る必要があります。一般的なエラーは、ドラッグアンドドロップのコンテンツが受信されないように、デフォルトの動作が欠落していることです。

特にHTMLとJavaScriptにすでに精通している場合、ドラッグアンドドロップ機能の実裝は複雑ではありません。 HTML5は、サードパーティライブラリに依存せずに基本的なドラッグアンドドロップの相互作用を完了できるネイティブドラッグアンドドロップAPIを提供します。いくつかの重要なポイントを見て、すぐに始めるのに役立ちましょう。

HTMLドラッグアンドドロップAPIとは何ですか？

HTML5ネイティブドラッグアンドドロップAPIを使用すると、ユーザーはマウスで要素を「ドラッグ」し、別の場所に「配置」できます。この関數(shù)は、ファイルのアップロード、要素ソートなどのシナリオでよく使用されます。

主に、 dragstart 、 dragover 、 dropなどを含む一連のイベントを通じてドラッグプロセスとドロッププロセスを制御します。これらのイベントをトリガーする役割と順序を理解することは、APIを使用する最初のステップです。

要素をドラッグ可能にする方法は？

デフォルトでは、リンク、畫像、およびいくつかのフォーム要素のみがドラッグ可能です。カスタム要素（divなど）をドラッグしたい場合は、プロパティを設定する必要があります。

 <div draggable = "true">私をドラッグして試してみてください</div>

次に、 dragstartイベントをバインドします。これにより、ブラウザに何をドラッグするかがわかります。

 document.QuerySelector（ 'div'）。AddEventListener（ 'dragstart'、function（e）{
    e.datatransfer.setData（ "Text/Plain"、E.Target.id）;
}）;

ここで最も重要なポイントは、ターゲット領域で取得できるようにドラッグされたデータを保存するためにsetData()メソッドを呼び出すことです。

ターゲットエリアにドラッグしてドロップすることに対処する方法は？

次に、コンテンツにドラッグされる場所である1つ以上の「配信エリア」を指定する必要があります。通常の練習は、 dragoverやdropイベントを聴くことです。

• dragover ：デフォルトの動作をブロックする必要があります。そうしないと、 drop発射されません。
• drop ：ここでデータをドラッグして処理します。

サンプルコードは次のとおりです。

 const dropzone = document.getElementById（ 'drop-zone'）;

dropzone.addeventlistener（ 'dragover'、function（e）{
    E.PreventDefault（）; //デフォルトの動作をブロックする必要があります}）;

dropzone.addeventlistener（ 'drop'、function（e）{
    E.PreventDefault（）;
    const data = e.datatransfer.getData（ "text/plain"）;
    const draggedelement = document.getElementById（data）;
    dropzone.appendchild（draggedelement）;
}）;

一般的な間違いは、デフォルトの動作をブロックするのを忘れて、ドラッグアンドドロップコンテンツを正しく受信できないようにすることです。

ドラッグしてドロップしてファイルをアップロードする方法は？

ユーザーがローカルファイルをWebページにドラッグしてアップロードできるようにするなど、ファイルのドラッグアンドドロップアップロードをサポートする場合は、 FileListオブジェクトを使用する必要があります。

dropイベントを聴き、 e.dataTransfer.filesからファイルリストを取得できます。

 dropzone.addeventlistener（ 'drop'、function（e）{
    E.PreventDefault（）;
    const files = e.datatransfer.files;
    for（i = 0; i <files.length; i）{
        console.log（files [i] .name）; //ファイル名を印刷}
}）;

この方法は、畫像のアップロードやドキュメントインポートなどの関數(shù)によく使用されます。一部のブラウザは、特定のタイプのファイルへのアクセスパスを制限するため、ファイルパスを直接読み取らないようにしてください。

基本的にそれだけです。これらの重要な手順を習得した後、視覚的なフィードバックの追加、複數(shù)の選択ドラッグとドロップのサポートなど、ニーズに応じて機能を拡張できます。少し面倒ですが、実際には段階的に行うことは難しくありません。

以上がHTML APIを使用してドラッグアンドドロップ機能を?qū)g裝しますの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。