ドラッグ アンド ドロップ (Drag and Drop) の HTML5 CSS3 実装 example_html5 チュートリアル スキル

この記事では、HTML5 のドラッグ アンド ドロップ実装について簡単に紹介します。
ドラッグ アンド ドロップは HTML5 標準の一部です。
ブラウザのサポート: Internet Explorer 9、Firefox、Opera 12、Chrome、Safari 5 はドラッグ アンド ドロップをサポートします。

ドラッグされた要素、dragElement:
(1) イベントの追加: ondragstart
(2) 属性の追加: Dragonable

要素を配置、dropElement:
1. イベントを追加: ondargenter、ondragover、ondragleave、ondragend、ondrop
マウスのインとアウトのイベントに非常に似ており、言葉も理解しやすいので、詳細については説明しません。以下に例を示します。

2. ページ上の要素間でドラッグ アンド ドロップします
以下は、各イベントがどのようにトリガーされるかを示す、div 間のドラッグ アンド ドロップの小さな例です:

コードをコピー

コードは次のとおりです:

> ;

システムで選択した 1 つ以上のファイルを div にドラッグします。ドラッグしたファイルの情報はファイルに保存され、ファイルからファイルの種類、長さ、内容を取得してアップロードできます。

3. setDragImage(image, x, y) は、マウスの移動中にマウスと一緒に移動するエフェクト画像 を設定するために使用されます。ドラッグスタートで設定する必要があります。

4. types、effectAllowed、dropEffect はそれぞれ、ドラッグされた要素のタイプと、ドラッグ プロセス中にマウスによって表示されるスタイルです 。ただし、これらの属性は通常は無視でき、通常は使用されません。