JavaScript ドラッグタイムドラッグケースの詳細な説明

ドラッグできるオブジェクトには、要素ノード、画像、リンク、選択したテキストなど、いくつかの種類があります。 Web ページでは、デフォルトでドラッグできない要素ノードを除き、その他すべて (画像、リンク、選択したテキスト) を直接ドラッグできます。要素ノードをドラッグ可能にするには、ノードのdraggable属性をtrueに設定します。

<div ドラッグ可能="true">
  このエリアはドラッグできます</div>

draggable属性はどの要素ノードでも使用できますが、画像 ( <img> ) とリンク ( <a> ) はこの属性がなくてもドラッグできます。これらの場合、この属性を使用する場合は、これら 2 つの要素のドラッグを防ぐためにfalseに設定されることが多いです。

要素ノードのdraggableプロパティをtrueに設定すると、ノード内のテキストまたは子ノードをマウスで選択できなくなることに注意してください。

要素ノードまたは選択したテキストをドラッグすると、次のイベントを含むドラッグイベントが継続的にトリガーされます。

drag : ドラッグ処理中、ドラッグされたノードで継続的にトリガーされます (数百ミリ秒ごとに)。
dragstart : ユーザーがドラッグを開始すると、ドラッグされたノードでトリガーされます。このイベントのtarget属性は、ドラッグされたノードです。通常、ドラッグされたデータは、このイベントのリスニング関数で指定する必要があります。
dragend : ドラッグが終了したとき（マウスボタンを放すか、ESC キーを押す）にドラッグされたノードでトリガーされます。このイベントのtarget属性は、ドラッグされたノードです。これはdragstartイベントと同じノードでトリガーされます。ドラッグがウィンドウをまたぐか、途中でキャンセルされるかに関係なく、 dragendイベントは常にトリガーされます。
dragenter : 現在のノードにドラッグすると、現在のノードで 1 回トリガーされ、イベントのtarget属性は現在のノードになります。通常、このイベントのリスニング関数で、ドラッグされたデータを現在のノードにドロップできるようにするかどうかを指定する必要があります。現在のノードにイベントのリスナー関数がない場合、またはリスナー関数が何の操作も実行しない場合は、現在のノードでデータをドロップできないことを意味します。現在のノードへのドラッグの視覚的な表示も、このイベントのリスニング関数で設定されます。
dragover : 現在のノードの上にドラッグすると、現在のノードで継続的にトリガーされ (数百ミリ秒間隔で)、イベントのtarget属性は現在のノードになります。このイベントとdragenterイベントの違いは、 dragenterイベントはノードに入るときにトリガーされ、その後、ノードを離れない限りdragoverイベントがトリガーされ続けることです。
dragleave : ドラッグ操作が現在のノード範囲から外れると、現在のノードでトリガーされます。このイベントのtarget属性は現在のノードです。現在のノードでのドラッグアンドドロップ操作を視覚的に表示する場合は、このイベントのリスナー関数で設定します。
drop : ドラッグされたノードまたは選択されたテキストがターゲットノードに放されたときに、ターゲットノードでトリガーされます。現在のノードがdrop許可していない場合は、ノード上でマウスボタンを放してもこのイベントはトリガーされないことに注意してください。ユーザーが ESC キーを押して操作をキャンセルすると、イベントはトリガーされません。このイベントのリスニング関数は、ドラッグされたデータを取得し、関連する処理を実行する役割を担います。

次の例は、ドラッグされたノードの背景色を動的に変更する方法を示しています。

div.addEventListener('dragstart', 関数(e) {
  this.style.backgroundColor = '赤';
}、 間違い）;
 
div.addEventListener('dragend', 関数(e) {
  this.style.backgroundColor = '緑';
}、 間違い）;

上記のコードでは、 divノードがドラッグされると背景色が赤に変わり、ドラッグが終了すると緑に戻ります。

以下は、ノードを現在の親ノードから別の親ノードにドラッグする方法を示した例です。

/* HTML コードは次のとおりです <div class="dropzone">
   <div id="ドラッグ可能" ドラッグ可能="true">
     このノードはドラッグできます</div>
 </div>
 <div class="dropzone"></div>
 <div class="dropzone"></div>
 <div class="dropzone"></div>
*/
 
//ドラッグされたノード var dragged;
 
document.addEventListener('dragstart', 関数(イベント) {
  // ドラッグされたノードを保存します。dragged = event.target;
  // ドラッグされたノードの背景色が透明になります。event.target.style.opacity = 0.5;
}、 間違い）;
 
document.addEventListener('dragend', 関数(イベント) {
  // ドラッグされたノードの背景色が通常に戻ります。event.target.style.opacity = '';
}、 間違い）;
 
document.addEventListener('dragover', 関数(イベント) {
  // ドラッグ効果がリセットされないようにし、ドラッグされたノードをターゲット ノードに配置できるようにします。event.preventDefault();
}、 間違い）;
 
document.addEventListener('dragenter', 関数(イベント) {
  // ターゲットノードの背景色が紫に変わります // イベントがバブルするため、ノードをフィルタリングする必要があります if (event.target.className === 'dropzone') {
    event.target.style.background = '紫';
  }
}、 間違い）;
 
document.addEventListener('dragleave', 関数(イベント) {
  // ターゲットノードの背景色が復元されます if (event.target.className === 'dropzone') {
    イベントターゲットスタイルの背景 = '';
  }
}、 間違い）;
 
document.addEventListener('drop', 関数(イベント) {
  // イベントのデフォルトの動作を防止します（たとえば、特定の要素ノードでリンクを開くことができます）。
  イベントをデフォルトにしない();
  イベントターゲットクラス名が 'ドロップゾーン' の場合
    // ターゲットノードの背景色を復元します。event.target.style.background = '';
    //ドラッグしたノードをターゲットノードに挿入します。dragged.parentNode.removeChild(dragged);
    event.target.appendChild(ドラッグ);
  }
}、 間違い）;

ドラッグイベントについては注意すべき点がいくつかあります。

ドラッグプロセスでは、上記のドラッグイベントのみがトリガーされます。マウスが移動しても、マウスイベントはトリガーされません。
オペレーティングシステムからブラウザーにファイルをドラッグしても、 dragstartイベントとdragendイベントはトリガーされません。
dragenterおよびdragoverイベントのリスナー関数は、ドラッグされたデータを取得するために使用されます (つまり、ドラッグされた要素をドロップできるようにします)。 Web ページのほとんどの領域はドラッグされた要素をドロップするためのターゲットノードとして適していないため、これら 2 つのイベントのデフォルト設定では、現在のノードはドラッグされた要素を受け入れることができません。データをターゲットノードにドロップする場合は、まずこれら 2 つのイベントのデフォルトの動作を防止する必要があります。

<div ondragover="false を返す">
<div ondragover="event.preventDefault()">

上記のコードでは、ドラッグイベントをキャンセルするか、デフォルトの動作を防止しないと、ドラッグされたノードをdivノードにドロップできません。

DragEvent インターフェース

ドラッグイベントはすべてDragEventインターフェイスを継承し、DragEvent インターフェイスはMouseEventインターフェイスとEventインターフェイスを継承します。

ブラウザは、ドラッグイベントのインスタンスオブジェクトを生成するためのDragEvent()コンストラクターをネイティブに提供します。

新しい DragEvent(タイプ、オプション)

DragEvent()コンストラクターは 2 つのパラメーターを受け入れます。最初のパラメーターは、イベントの種類を示す文字列です。このパラメーターは必須です。2 番目のパラメーターは、イベントのプロパティを設定するために使用されるイベント構成オブジェクトです。このパラメーターはオプションです。構成オブジェクトは、 MouseEventインターフェイスとEventインターフェイスの構成プロパティを受け入れるだけでなく、 dataTransferプロパティをnullまたはDataTransferインターフェイスのインスタンスに設定することもできます。

DataTransferインスタンスオブジェクトは、ドラッグイベントで送信されるデータの読み取りと書き込みに使用されます。詳細については、以下の「DataTransfer インターフェイス」セクションを参照してください。

データ転送インターフェースの概要

ドラッグイベントのすべてのインスタンスには、転送するデータの読み取りと書き込みに使用されるDragEvent.dataTransferプロパティがあります。このプロパティの値は、 DataTransferインターフェイスのインスタンスです。

ブラウザはDataTransferインスタンスオブジェクトを生成するためのDataTransfer()コンストラクターをネイティブに提供します。

var dataTrans = 新しい DataTransfer();

DataTransfer()コンストラクターは引数を受け入れません。

ドラッグされたデータは、データのタイプ (形式とも呼ばれます) とデータの値という 2 つの側面に分けられます。データの型は MIME 文字列 ( text/plain 、 image/jpegなど) であり、データの値は文字列です。一般的に、テキストをドラッグすると、データはデフォルトでそのテキストになり、リンクをドラッグすると、データはデフォルトでリンクの URL になります。

ドラッグイベントが開始されると、開発者はデータタイプとデータ値を提供できます。ドラッグプロセス中に、開発者はdragenterとdragoverイベントのリスナー関数を使用してデータ型を確認し、ドラッグされたオブジェクトをドロップできるかどうかを判断できます。たとえば、リンクのドロップのみを許可するゾーンでは、ドラッグのデータ型がtext/uri-listであるかどうかを確認します。

dropイベントが発生すると、リスニング関数はドラッグされたデータを取得して処理します。

DataTransfer のインスタンスプロパティ

データ転送.ドロップ効果

DataTransfer.dropEffectプロパティは、ドラッグしたノードをドロップする効果を設定するために使用され、関連する領域にドラッグしたときのマウスの形状に影響します。以下の値を取る可能性があります。

コピー: ドラッグしたノードをコピーします
移動: ドラッグしたノードを移動する
リンク: ドラッグしたノードへのリンクを作成します
なし: ドラッグされたノードはドロップできません

上記の値以外、他の値を設定することは無効です。

target.addEventListener('dragover', 関数(e) {
  e.preventDefault();
  e.stopPropagation();
  e.dataTransfer.dropEffect = 'コピー';
});

上記のコードでは、ドラッグされた要素dropと、受信領域にノードがコピーされます。

dropEffectプロパティは通常、 dragenterイベントとdragoverイベントのリスナー関数で設定されます。このプロパティは、 dragstart 、 drag 、 dragleaveイベントには影響しません。このプロパティはドラッグされたノードを受け取る領域に対してのみ有効であるため、ドラッグされたノード自体に対しては無効です。ターゲット領域に入ると、ドラッグ動作は設定された効果に初期化されます。

データ転送効果許可

DataTransfer.effectAllowedプロパティは、このドラッグで許可される効果を設定します。以下の値を取る可能性があります。

コピー: ドラッグしたノードをコピーします
移動: ドラッグしたノードを移動するリンク: ドラッグしたノードへのリンクを作成する
copyLink: copyまたはlink許可する
copyMove: copyまたはmove許可します
linkMove: linkまたはmove許可する
all: すべての効果を許可する
なし: ドラッグされたノードはドロップできません
初期化されていない: デフォルト値、 allに相当

効果が許可されていない場合、ユーザーはターゲットノードでこの効果を実現できません。

このプロパティとdropEffectプロパティは同じものの 2 つの側面です。前者はドラッグされたノードに許可される効果を設定し、後者はドラッグを受け入れる領域の効果を設定します。これらは一緒に使用されることがよくあります。

このプロパティを設定するには、 dragstartイベントのリスナー関数を使用できます。他のイベントリスナー関数でこのプロパティを設定することは無効です。

source.addEventListener('dragstart', 関数(e) {
  e.dataTransfer.effectAllowed = '移動';
});
 
target.addEventListener('dragover', 関数(e) {
  ev.dataTransfer.dropEffect = '移動';
});

dropEffect属性とeffectAllowed属性のいずれかがnoneである限り、ターゲットノードでdrop操作を完了することはできません。

データ転送.ファイル

DataTransfer.filesプロパティは、ドラッグアンドドロップ操作で転送するために使用できるローカルファイルのセットが含まれる FileList オブジェクトです。ドラッグにファイルが含まれない場合、このプロパティは空の FileList オブジェクトになります。

以下はドラッグされたファイルを受信する例です。

// HTML コードは次のとおりです // <div id="output" style="min-height: 200px;border: 1px solid black;">
// ファイルをここにドラッグします // </div>
 
var div = document.getElementById('出力');
 
div.addEventListener("dragenter", 関数(イベント) {
  div.textContent = '';
  イベントの伝播を停止します。
  イベントをデフォルトにしない();
}、 間違い）;
 
div.addEventListener("dragover", 関数(イベント) {
  イベントの伝播を停止します。
  イベントをデフォルトにしない();
}、 間違い）;
 
div.addEventListener("drop", 関数(イベント) {
  イベントの伝播を停止します。
  イベントをデフォルトにしない();
  var ファイル = event.dataTransfer.files;
  (var i = 0; i < files.length; i++) {
    div.textContent += files[i].name + ' ' + files[i].size + 'bytes\n';
  }
}、 間違い）;

上記のコードでは、ドラッグされたファイルの情報はdataTransfer.filesプロパティを通じて読み取られます。ファイルの内容を読み取る場合は、 FileReaderオブジェクトを使用する必要があります。

div.addEventListener('drop', 関数(e) {
  e.preventDefault();
  e.stopPropagation();
 
  var ファイルリスト = e.dataTransfer.files;
  ファイルリストの長さが0より大きい場合
    var ファイル = ファイルリスト[0];
    var リーダー = 新しい FileReader();
    reader.onloadend = 関数(e) {
      e.target.readyState === FileReader.DONE の場合 {
        var コンテンツ = reader.result;
        div.innerHTML = 'ファイル: ' + file.name + '\n\n' + コンテンツ;
      }
    }
    reader.readAsBinaryString(ファイル);
  }
});

データ転送タイプ

DataTransfer.typesプロパティは読み取り専用の配列であり、各メンバーはドラッグされたデータの形式 (通常は MIME 値) を含む文字列です。たとえば、テキストをドラッグする場合、対応するメンバーはtext/plainです。

以下はdataTransfer属性のタイプをチェックして、現在のノードでdrop操作が許可されているかどうかを判断する例です。

関数 contains(リスト, 値){
  (var i = 0; i < list.length; ++i) の場合 {
    if(list[i] === value)はtrueを返します。
  }
  false を返します。
}
 
関数doDragOver(イベント) {
  var isLink = contains(event.dataTransfer.types, 'text/uri-list');
  if (isLink) イベント.preventDefault();
}

上記のコードでは、ドラッグされたノードがリンクである場合にのみ、現在のノードへのドロップが許可されます。

データ転送アイテム

DataTransfer.itemsプロパティは、読み取り専用の配列のようなオブジェクト (DataTransferItemList インスタンス) を返します。その各メンバーは、ドラッグされているオブジェクト (DataTransferItem インスタンス) です。ドラッグにオブジェクトが含まれていない場合は、空のオブジェクトが返されます。

DataTransferItemList インスタンスには、次のプロパティとメソッドがあります。

length : メンバーの数を返します
add(data, type) : 指定された内容とタイプ( text/htmlやtext/plainなど)の文字列をメンバーとして追加します。
add(file) : addメソッドの別の使い方。ファイルをメンバーとして追加する。
remove(index) : 指定された位置のメンバーを削除します
clear() : すべてのメンバーを削除する

DataTransferItem インスタンスには、次のプロパティとメソッドがあります。

kind : メンバーの種類 ( stringまたはfile ) を返します。
type : メンバーのタイプ (通常は MIME 値) を返します。
getAsFile() : ドラッグされたオブジェクトがファイルの場合はそのファイルを返します。それ以外の場合はnullを返します。
getAsString(callback) : ドラッグされているオブジェクトが文字列の場合、指定されたコールバック関数に文字を渡して処理します。このメソッドは非同期なので、コールバック関数を渡す必要があります。

ここに例があります。

div.addEventListener('drop', 関数(e) {
  e.preventDefault();
  e.dataTransfer.items が null の場合
    (var i = 0; i < e.dataTransfer.items.length; i++) {
      console.log(e.dataTransfer.items[i].kind + ': ' + e.dataTransfer.items[i].type);
    }
  }
});

DataTransfer インスタンスメソッド

データ転送.setData()

DataTransfer.setData()メソッドは、ドラッグイベントによって運ばれるデータを設定するために使用されます。このメソッドには戻り値はありません。

event.dataTransfer.setData('text/plain', 'ドラッグするテキスト');

上記のコードは、現在のドラッグイベントにプレーンテキストデータを追加します。

このメソッドは 2 つのパラメータを受け入れます。どちらも文字列です。最初のパラメータはデータ型 ( text/plainなど) を示し、2 番目のパラメータは特定のデータです。指定されたタイプのデータがdataTransfer属性に存在しない場合は、このデータが追加され、存在する場合は元のデータが新しいデータに置き換えられます。

テキストボックスをドラッグするか、選択したテキストをドラッグすると、手動で指定しなくても、対応するテキストデータがデフォルトでdataTransfer属性に追加されます。

<div ドラッグ可能="true">
  ああ
</div>

上記のコードでは、この<div>要素をドラッグすると、テキストデータaaaが自動的に表示されます。

元のデータを置き換えるには、 setDataメソッドを使用します。

<div
  ドラッグ可能="true"
  ondragstart="event.dataTransfer.setData('text/plain', 'bbb')"
>
  ああ
</div>

上記のコードでは、ドラッグデータは実際にはaaaではなくbbbです。

次は他の種類のデータを追加します。 text/plain最も一般的にサポートされている形式であるため、互換性を確保するために、データのコピーを常にプレーンテキスト形式で保存することをお勧めします。

var dt = イベント.dataTransfer;
 
// リンクを追加 dt.setData('text/uri-list', 'http://www.example.com');
dt.setData('text/plain', 'http://www.example.com');
 
// HTML コードを追加します dt.setData('text/html', 'Hello there, <strong>stranger</strong>');
dt.setData('text/plain', 'こんにちは、見知らぬ人');
 
// 画像のURLを追加
dt.setData('text/uri-list', 画像URL);
dt.setData('text/plain', イメージURL);

複数の形式のデータを一度に提供できます。

var dt = イベント.dataTransfer;
dt.setData('application/x-bookmark', ブックマーク文字列);
dt.setData('text/uri-list', 'http://www.example.com');
dt.setData('text/plain', 'http://www.example.com');

上記のコードでは、同じイベントに 3 種類のデータを保存することで、ドラッグイベントで異なるオブジェクトに異なる値dropできます。最初の形式は、デフォルトではブラウザで読み取ることができないカスタム形式であることに注意してください。つまり、特定のコードをデプロイしたノードだけがこのデータをdrop (読み取り) できます。

データ転送.getData()

DataTransfer.getData()メソッドは、文字列 (データ型を示す) をパラメータとして受け入れ、イベントによってもたらされた指定された型のデータ (通常はsetDataメソッドによって追加されたデータ) を返します。指定されたタイプのデータが存在しない場合は、空の文字列が返されます。通常、データはdropイベントがトリガーされた後にのみ取得できます。

以下は、指定されたタイプのデータを取得するために使用されるdropイベントリスニング関数です。

関数 onDrop(イベント) {
  var データ = event.dataTransfer.getData('text/plain');
  イベントターゲットのテキストコンテンツ = データ;
  イベントをデフォルトにしない();
}

上記のコードは、ドラッグイベントのテキストデータを取り出し、それを現在のノードのテキストコンテンツに置き換えます。ユーザーがリンクをドラッグすると、ブラウザはデフォルトで現在のウィンドウでリンクを開くため、この時点でブラウザのデフォルトの動作もキャンセルする必要があることに注意してください。

getDataメソッドは文字列を返します。複数のデータ項目が含まれている場合は、手動で解析する必要があります。

関数doDrop(イベント) {
  var 行 = event.dataTransfer.getData('text/uri-list').split('\n');
  for (let 行の行) {
    リンクを document.createElement('a') とします。
    link.href = 行;
    リンクのテキストコンテンツ = 行;
    イベントターゲットに子要素を追加します。
  }
  イベントをデフォルトにしない();
}

上記のコードでは、 getDataメソッドはリンクのセットを返しますが、これは自分で解析する必要があります。

タイプ値をURLとして指定すると、最初の有効なリンクが取得されます。

var link = event.dataTransfer.getData('URL');

次の例では、複数の種類のデータからデータを抽出します。

関数doDrop(イベント) {
  var タイプ = event.dataTransfer.types;
  var サポートされているタイプ = ['text/uri-list', 'text/plain'];
  types = サポートされているTypes.filter(関数 (値) { types.includes(値) });
  （タイプの長さ）の場合{
    var データ = event.dataTransfer.getData(types[0]);
  }
  イベントをデフォルトにしない();
}

データ転送.クリアデータ()

DataTransfer.clearData()メソッドは、文字列 (データ型を示す) をパラメータとして受け取り、イベントによってもたらされた指定された型のデータを削除します。タイプが指定されていない場合は、すべてのデータが削除されます。指定された型が存在しない場合は、このメソッドを呼び出しても効果はありません。

イベントデータ転送のクリアデータ('text/uri-list');

上記のコードは、イベントによって取得されたtext/uri-listタイプのデータをクリアします。

このメソッドはドラッグされたファイルを削除しないため、このメソッドを呼び出した後も、 DataTransfer.typesプロパティはFilesタイプを返す場合があります (ドラッグされているファイルがある場合)。

このメソッドは、ドラッグ操作データを書き込むことができるのはこのときだけなので、 dragstartイベントのリスナー関数でのみ使用できることに注意してください。

データ転送.setDragImage()

ドラッグプロセス中 ( dragstartイベントがトリガーされた後)、ブラウザーにはマウスとともに移動する画像が表示され、ドラッグされているノードが示されます。この画像は自動的に作成され、通常はドラッグされたノードの外観を示します。自分で設定する必要はありません。

DataTransfer.setDragImage()メソッドを使用してこの画像をカスタマイズできます。 3 つのパラメータを受け入れます。最初のパラメータは<img>ノードまたは<canvas>ノードです。省略またはnullの場合は、ドラッグされたノードの外観が使用されます。2 番目と 3 番目のパラメータは、画像の左上隅を基準としたマウスの水平座標と右座標です。

ここに例があります。

/* HTML コードは次のようになります <div id="drag-with-image" class="dragdemo" draggable="true">
   私を引っ張って
 </div>
*/
 
var div = document.getElementById('画像付きドラッグ');
div.addEventListener('dragstart', 関数(e) {
  var img = document.createElement('img');
  img.src = 'http://path/to/img';
  e.dataTransfer.setDragImage(画像, 0, 0);
}、 間違い）;

JavaScript ドラッグタイムケースの詳細な説明に関するこの記事はこれで終わりです。より関連性の高い js ドラッグタイムコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:

AngularJS ドラッグアンドドロッププラグイン ngDraggable.js をベースにしたドラッグアンドドロップソートの実装
AngularJS での ng-drag と ng-drop の使用に関する詳細な研究
jQuery プラグイン jquery.dragscale.js は、要素をドラッグしてサイズを変更するメソッドを実装します (デモソースコードのダウンロード付き)
JSドラッグコードを書いてみよう
js ドラッグエフェクトクラスと dom-drag.js の簡単な分析

<<: MySQL でテーブルを作成するときの NULL と NOT NULL の使用方法の詳細な説明

>>: Linux 上の LAN 内のすべてのホスト名 (コンピュータ名) をすばやく一覧表示するスクリプト