H5 でドラッグ アンド ドロップを実装する方法

今回は、H5 ドラッグ アンド ドロップの実装方法と、H5 ドラッグ アンド ドロップ効果を実現するためにどのような notes を使用する必要があるかを説明します。以下は実際的なケースです。見てみましょう。

はじめに

ドラッグ アンド ドロップは、オブジェクトを取得し、後で別の場所にドラッグする一般的な機能です。

HTML5 では、ドラッグ アンド ドロップが標準の一部であり、あらゆる要素をドラッグ アンド ドロップできます。

最初に小さな例をクリックします: ユーザーが e388a4556c0f65e1904146cc1a846bee 要素のドラッグを開始したときに

JavaScript

を実行します。 ヒント: リンクと
画像

はデフォルトでドラッグ可能であり、draggable 属性は必要ありません。

定義と使用法

次の

イベント

は、ドラッグ アンド ドロップ プロセス中にトリガーされます:

ドラッグ ターゲット (ソース要素) でイベントをトリガーします: ondragstart - ユーザーが要素のドラッグを開始するとトリガーされます

ondrag -要素がドラッグされています 移動時にトリガーされます

ondragend - ユーザーが要素のドラッグを完​​了した後にトリガーされます

ターゲットが放されたときにトリガーされるイベント: ondragenter - このイベントは、マウスでドラッグされたオブジェクトがコンテナー範囲に入るとトリガーされます

ondragover -オブジェクトがドラッグされたとき このイベントは、オブジェクトが別のオブジェクトのコンテナ範囲内でドラッグされたときにトリガーされます

ondragleave - このイベントは、マウスでドラッグされているオブジェクトがそのコンテナ範囲を離れるときにトリガーされます

ondrop - マウス ボタンがドラッグ プロセス中にリリースされた このイベントをトリガーします

ブラウザのサポート

Internet Explorer 9 以降、Firefox、Opera、Chrome、Safari はドラッグをサポートしています。

注: Safari 5.1.2 はドラッグをサポートしていません。要素をドラッグすると、ondragover イベントが 350 ミリ秒ごとにトリガーされます。

例

まずコードを貼り付けてから、1つずつ説明します:

<p draggable="true" ondragstart="myFunction(event)">拖动我!</p>

これらの事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php中国語ウェブサイトの他の関連記事に注目してください。

関連記事:

HTMLでテーブルのマウスドラッグソートを実装する方法

HTMLファイルを開く方法

HTMLのコメントの標準的な使用法は何ですか? 、css と js

以上がH5 でドラッグ アンド ドロップを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。