ホーム>Web デザインのチュートリアル>HTMLチュートリアル

著者：Eve Cole 更新時間：2025-02-04 12:24:01
簡単な紹介

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

在HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

先点击一个小例子：在用户开始拖动<p> 元素时执行JavaScript

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

ヒント：リンクと写真はデフォルトでドラッグされ、ドラッグ可能なプロパティは必要ありません。

定義と使用法

ドラッグアンドドロッププロセス中に、次のイベントがトリガーされます。

  • イベントのトリガー（ソース要素）：ondragstart-ユーザー - ユーザーが要素のドラッグを開始したとき
    • Ondrag -Elementは、ドラッグ時にトリガーされます
    • ondragend-ユーザー完了要素ドラッグトリガー
  • ターゲットのリリース時にトリガーされたイベント：Ondragenter-マウスによってドラッグされたオブジェクトがコンテナに入ると、このイベントがトリガーされます
    • ondragover-ドラッグされたオブジェクトが別のオブジェクトコンテナの範囲内でドラッグされると、このインシデントがトリガーされます
    • ondragleave-マウスによってドラッグされたオブジェクトが容器を離れるときにこのインシデントをトリガーする
    • オンドロップ - ドラッグを行うと、マウスキーをリリースするとこのイベントがトリガーされます
ブラウザのサポート

Internet Explorer 9+、Firefox、Opera、Chrome、およびSafariサポートドラッグ。

注：Safari 5.1.2は、ドラッグのドラッグをサポートしていません。

実例

最初にコードを投稿してから、次に説明します。

 <! Doctype html> <html> <head> <Title> HTML5 Drag </Title> <Meta Charset = UTF-8> <STYLE>#DIV1 {width: 350px; height: 70px; Padding: 10px; Border: Border: Border: 1PX solid #Aaaaaa;} </style> </head> <body> <p> dragging img_w3slogo.gif picture to the rectangular box: </p> <div ID = div1 onDrop = Drop (EVENT) onDragover = Allowdrop (EVEN T )> </div> <br> <img ID = DRAG1 SRC = Images/IMG_W3SLOGO. GIF DRAGGable = True ONDRAGSTATATRT = DRAG (Event) Width = 300 Height = 56> <SCRIPT> Function Al Lowdrop (EV) { EV.PREVENTDEFALT ( );} Function Drag (EV) {EV.DATATRANSFER.SETDATA (Text, Ev.target.id);} Function Drop (EV) {EV.PreventDefault (); VAR DATA = EV.DATATRANSFETDATA ( Text) ; ev .target.appendChild（documen.getElementbyId（data）;} </script> </body> </html>

ドラッグする前のページの効果は次のとおりです。

以下の次のコードの意味を分析しましょう。

セット要素をドラッグしてドロップできます

まず、要素をドラッグするために、ドラッグ可能なプロパティを真に設定します。

 <img draggable = true>
ドラッグdragstartとsetData（）

次に、要素がドラッグされたときに何が起こるかを指定します。

上記の例では、OndragStartプロパティは、ドラッグされたデータを指定する関数（イベント）を呼び出します。

datAtransfer.setData（）メソッドデータのデータ型と値を設定します。

関数drag（ev）{ev.datatransfer.setdata（text、ev.target.id）;}

この例では、データ型はテキストであり、値は要素をドラッグできるID（drag1）です。

放到何处- ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。許容配置を設定する必要がある場合は、要素のデフォルト処理を防ぐ必要があります。

这要通过调用ondragover 事件的event.preventDefault() 方法：

 event.preventdefault（）
パッティングドロップ

ドラッグデータが配置されると、ドロップイベントが発生します。

上記の例では、Ondrop属性は関数、Drop（event）を呼び出します。

 function drop（ev）{ev.preventdefault（）;

コード説明：

  • Dateのブラウザのデフォルト処理を回避するには、PreventDefault（）に電話してください（ドロップイベントのデフォルト動作がリンクで開かれます）
  • DataTransfer.getData（テキスト）メソッドを介してドラッグされたデータを取得します。この方法は、SetData（）メソッドの同じタイプの任意のデータに戻ります。
  • 被拖数据是被拖元素的id (drag1)
  • 配置要素への追加のドラッグ要素（ターゲット要素）

実装の結果は、図に示されているとおりです。

DatAtransferオブジェクト

在拖曳操作的过程中，我们可以用过dataTransfer对象来传输数据，以便在拖曳操作结束的时候对数据进行其他的操作。

オブジェクト属性：

  • DROPEFFECT：ドラッグアンドドロップターゲットで発生するドラッグアンドドロップの動作を設定または返します。如果此处设置的拖放行为不再effectAllowed属性设置的多种拖放行为之内，拖放操作将会失败。この属性値は、null、コピー、リンク、および移動の4つの値の1つにすぎません。
  • effectAllowed：ドラッグ要素が許可したドラッグ動作を設定または返します。この属性値は、noneに設定できます。
  • 項目：この属性は、ドラッグデータを表すDataTransferitemsオブジェクトを返します。
  • タイプ：この属性は、DatAtransferのデータに保存されているすべてのタイプのデータを含むDomstringListオブジェクトを返します。
オブジェクト方法：

  • setData(format,data):将指定格式的数据赋值给dataTransfer对象，参数format定义数据的格式也就是数据的类型，data为待赋值的数据
  • getData（Format）：DataTransferオブジェクトから指定された形式でデータを取得し、形式はデータ形式を表し、データはデータです。
  • clearData([format]):从dataTransfer对象中删除指定格式的数据，参数可选，若不给出，则为删除对象中所有的数据。
  • AddElement（要素）：カスタムアイコンを追加します
  • SetDragImage（Element、X、Y）：ドラッグアンドドロップ操作のカスタムアイコンを設定します。其中element设置自定义图标，x设置图标与鼠标在水平方向上的距离，y设置图标与鼠标在垂直方向上的距离。
描画可能なものを特定します

Function Dragstart_handler (EV) {console.log (Dragstart); // Add the target element's id to the data transfer object ev.datatransfer.setdata (text/plain, EV.TARG ET.ID);} <body> <p ID = p1 draggable = true ondragstart = dragstart_handler（event）;>この要素は描画可能です
ドラッグのデータを定義します

Function Dragstart_handler (EV) {// Add the Drag Data EV.DATATRANSFER.SETDATA (Text/PLAIN, EV.TARGET.ID); Ev.datatransfer.setdata (text/html, <p> Example Par Agraph </p>) ; ev.datatransfer.setdata（text/uri-list、http：//developer.mozilla.org）;}
ドラッグ画像を定義します

関数dragstart_handler（ev）{//イメージを作成し、ドラッグ画像に使用します（）; img.src = 'empler.gif';
ドラッグ効果を定義します

関数dragstart_handler（ev）{//ドラッグエフェクトを設定してev.datatransfer.dropeffect = copy;}にコピーします
ドロップゾーンを定義します

関数dragover_handler（ev）{ev.preventdefault（）;ターゲットのドミネートデータ= ev.datatransfer.getData（text）。 div> </body>
Firefoxブラウザのドラッグ問題

しかし、ここに行って、Firefoxブラウザで問題を見つけます。

HTML5のドラッグは、Pop -Upページがポップアップするのを防ぐためにPreventDefaultを使用しますが、Firefoxでは機能しませんか？

解決：

 document.body.ondrop = function（event）{event.preventdefault（）;

または、上記の例では、オンドロップメソッドに追加することもできます。

 function drop（ev）{ev.preventdefault（）

上記は、この記事のすべての内容です。

関連記事