ネイティブ ドラッグ アンド ドロップに関連する推奨コンテンツ

Dragable 属性 以前、HTML5 のネイティブ ドラッグ アンド ドロップに関する関連知識をいくつか紹介しました。今日は、HTML5 のドラッグ アンド ドロップに関するその他の小さな機能を紹介します。早速、一緒に見ていきましょう。デフォルトでは、リンク、テキスト、画像はドラッグ可能であるため、それらをドラッグするためのコードを記述する必要はありません。他の要素タグをドラッグ可能にしたい場合、それができるのは HTML5 だけです。 HTML5 では、すべての HTML 要素にドラッグ可能属性を指定し、要素をドラッグできるかどうかを示します。 link タグと image タグでは、dragable 属性が自動的に true に設定され、その他の要素の Dragonable 属性のデフォルト値は false です。ドラッグ可能属性をサポートするブラウザは、Firefox 4 以降、Chrome、IE 10 以降、および Safari 5 以降です。 Opera 11.5 以前のバージョンは、HTML5 のドラッグ アンド ドロップ機能をサポートしていません。さらに、Firefox がドラッグ可能な属性をサポートできるようにするには、ondragstart イベント ハンドラーを追加し、一部を dataTransfer オブジェクトに保存する必要があります

1 HTML5 のネイティブ ドラッグの実際の戦闘と分析 (4 つのドラッグ可能な属性とその他のメンバー)

はじめに: これまでに、HTML5 のネイティブ ドラッグ アンド ドロップに関するいくつかの関連知識を紹介しました。今日は、HTML5 のドラッグ アンド ドロップに関するその他の小さな機能を紹介します。早速、一緒に見ていきましょう。

2. HTML5 ネイティブ ドラッグの実戦と分析 (3 つの dataTransfer オブジェクト)

はじめに: ネイティブ ドラッグは、dragstart、drag、dragend イベントを通じて実装されます。ただし、これは単なるドラッグ アンド ドロップです。IE6 と IE7 にはまだドラッグ アンド ドロップの問題があり、データ交換は実装されていません。データの交換を実現するために、IE5 では dataTransfer オブジェクトが導入されました。 dataTransfer オブジェクトはイベント オブジェクトのプロパティであり、ドラッグされた要素からドロップ ターゲットに文字列形式でデータを転送するために使用されます。 dataTransfer オブジェクトはイベント オブジェクトのプロパティであるため、ドラッグ アンド ドロップ イベントのイベント ハンドラー内でのみアクセスできます。イベント ハンドラーでは、このオブジェクトのプロパティとメソッドを使用して、ドラッグ アンド ドロップ機能を完了できます。

3. HTML5 ネイティブドラッグの実際の戦闘と分析 (2 つのドラッグイベント、dragstart、drag、dragend)

はじめに: ドラッグイベントを通じて、多くのドラッグを制御できます。どの要素またはどこでドラッグ イベントが発生するかが最も重要です。一部のイベントはドラッグされた要素で発生し、一部のイベントはドロップ ターゲットで発生します。要素がドラッグされると、dragstart イベント、drag イベント、dragend イベントがトリガーされるイベントです。

4. HTML5 ネイティブドラッグアンドドロップの実戦と分析 (ドラッグアンドドロップの歴史の概要)

はじめに: ドラッグアンドドロップについて言及したときに、非常に興味深い話を思い出しました。 JavaScript トレーニング中 効果はドラッグです。マウスを使用して、オブジェクトを任意の場所にドラッグできます。

以上がネイティブ ドラッグ アンド ドロップに関連する推奨コンテンツの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。