HTML5のドラッグ＆ドロップ（Drag and Drop）の詳しい説明と例-H5 チュートリアル-php.cn

はじめに

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

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

最初に小さな例をクリックします: ユーザーが

要素のドラッグを開始したときに JavaScript を実行します

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

ログイン後にコピー

ヒント: リンクと画像はデフォルトでドラッグ可能であり、draggable 属性は必要ありません。

定義と使用法

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

ドラッグターゲット (ソース要素) でイベントをトリガー:

ondragstart - ユーザーが要素のドラッグを開始するとトリガーされます

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

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

ターゲットが放されたときにトリガーされるイベント:

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

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

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

ondrop - ドラッグ中プロセスを実行し、マウスを放しますこのイベントは、キーが押されるとトリガーされます

ブラウザのサポート

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

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

例

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

<!DOCTYPE html>
<html>
<head>
<title>HTML5拖拽</title>
<meta charset="utf-8">
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<p>拖动img_w3slogo.gif图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="images/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" width="300" height="56">

<script>
function allowDrop(ev){
    ev.preventDefault();
}

function drag(ev){
    ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev){
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

</script>
</body>
</html>

ログイン後にコピー

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

HTML5 拖放（Drag 和 Drop）详解与实例

上記のコードの意味を個別に分析してみましょう。

要素をドラッグ可能に設定します

まず、要素をドラッグ可能にするために、draggable 属性を true に設定します:

<img draggable="true">

ログイン後にコピー

何をドラッグするか - ondragstart と setData()

次に、要素がドラッグされると、何が起こったのだろう。

上記の例では、ondragstart 属性は、ドラッグするデータを指定する関数 drag(event) を呼び出します。

dataTransfer.setData() メソッドは、ドラッグされたデータのデータ型と値を設定します:

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

ログイン後にコピー

この例では、データ型は「Text」で、値はドラッグ可能な要素 (「drag1」) の ID です。

配置場所 - ondragover

ondragover イベントは、ドラッグされたデータを配置する場所を指定します。

デフォルトでは、データ/要素を他の要素に配置することはできません。配置を許可する必要がある場合は、要素のデフォルトの処理を防止する必要があります。

これは、ondragover イベントのevent.preventDefault() メソッドを呼び出すことで行われます:

event.preventDefault()

ログイン後にコピー

配置用 - ondrop

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

上記の例では、ondrop 属性は関数、drop(event) を呼び出します:

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

ログイン後にコピー

コードの説明:

ブラウザのデフォルトのデータ処理を回避するために、preventDefault() を呼び出します (drop イベントのデフォルトの動作はリンクします)フォームで開きます)

dataTransfer.getData("Text") メソッドを通じてドラッグされたデータを取得します。このメソッドは、setData() メソッドと同じ型のデータセットを返します。

ドラッグされたデータはドラッグされた要素のIDです(「drag1」)

ドラッグされた要素を配置要素(ターゲット要素)に追加します

結果は図のようになります:

HTML5 拖放（Drag 和 Drop）详解与实例

dataTransferオブジェクト

ドラッグ中操作中に、dataTransfer オブジェクトを使用してデータを転送し、ドラッグ操作が終了したときにデータに対して他の操作を実行できるようにします。

オブジェクトのプロパティ:

dropEffect: ドラッグアンドドロップターゲット上で実行できるドラッグアンドドロップ動作を設定または返します。ここで設定したドラッグアンドドロップ動作が、effectAllowed プロパティによって設定された複数のドラッグアンドドロップ動作の中に含まれなくなった場合、ドラッグアンドドロップ操作は失敗します。属性値は、「null」、「copy」、「link」、「move」の 4 つの値のいずれか 1 つだけが許可されます。

effectAllowed: ドラッグされた要素に許可されるドラッグ動作を設定または返します。プロパティ値は、「none」、「copy」、「copyLink」、「copyMove」、「link」、「linkMove」、「move」、「all」、および「uninitialized」に設定できます。

items: このプロパティは、ドラッグデータを表す DataTransferItems オブジェクトを返します。

types: このプロパティは、dataTransfer に格納されているすべてのタイプのデータを含む DOMStringList オブジェクトを返します。

オブジェクトメソッド:

setData(format,data): 指定された形式のデータを dataTransfer オブジェクトに割り当てます。パラメータ format は、割り当てられるデータの形式を定義します。

getData(format): from dataTransfer オブジェクトから指定された形式のデータを取得します。format はデータ形式を表し、data はデータを表します。

clearData([format]): dataTransfer オブジェクトから指定された形式のデータを削除します。パラメータが指定されていない場合、オブジェクト内のすべてのデータが削除されます。

addElement(element): カスタムアイコンを追加します

setDragImage(element,x,y):设置拖放操作的自定义图标。其中element设置自定义图标，x设置图标与鼠标在水平方向上的距离，y设置图标与鼠标在垂直方向上的距离。

Identify what is draggable

function dragstart_handler(ev) {
 console.log("dragStart");
 // Add the target element's id to the data transfer object
 ev.dataTransfer.setData("text/plain", ev.target.id);
}

<body>
 <p id="p1" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p>
</body>

ログイン後にコピー

Define the drag's data

function dragstart_handler(ev) {
  // Add the drag data
  ev.dataTransfer.setData("text/plain", ev.target.id);
  ev.dataTransfer.setData("text/html", "<p>Example paragraph</p>");
  ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org");
}

ログイン後にコピー

Define the drag image

function dragstart_handler(ev) {
  // Create an image and then use it for the drag image.
  // NOTE: change "example.gif" to an existing image or the image 
  // will not be created and the default drag image will be used.
  var img = new Image(); 
  img.src = 'example.gif'; 
  ev.dataTransfer.setDragImage(img, 10, 10);
}

ログイン後にコピー

Define the drag effect

function dragstart_handler(ev) {  // Set the drag effect to copy
  ev.dataTransfer.dropEffect = "copy";
}

ログイン後にコピー

Define a drop zone

function dragover_handler(ev) {
 ev.preventDefault();
 // Set the dropEffect to move
 ev.dataTransfer.dropEffect = "move"
}
function drop_handler(ev) {
 ev.preventDefault();
 // Get the id of the target and add the moved element to the target's DOM
 var data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));
}
<body>
 <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
</body>

ログイン後にコピー

火狐浏览器拖拽问题

但是进行到这儿在火狐浏览器中发现一个问题：

html5的拖拽，用了preventDefault防止弹出新页面，但在火狐下不管用？

解决办法：

document.body.ondrop = function (event) {
    event.preventDefault();
    event.stopPropagation();
}

ログイン後にコピー

更多HTML5 拖放（Drag 和 Drop）详解与实例相关文章请关注PHP中文网！