HTML5 要素のドラッグ アンド ドロップ (画像とテキスト) に関連する API の詳細な紹介

実際、HTML5 にはいくつかの便利な API が追加されているだけです
より簡単に開発できるようになります
ビジネス ロジックにもっと集中できるようにします
これらの API の使用も非常に簡単です
でも私の記憶力はあまり良くありません
だから私は今でもブログに記録していますという形で(マニュアル面白い)
今日はこのドラッグアンドドロップAPIについて書いてみましょう

デフォルトのドラッグ

ドラッグアンドドロップと言えば、実はドラッグアンドドロップ機能の最初の実装はIE(IE4)でした
H5がベースになっていますIEインスタンス上で指定されたドラッグアンドドロップの仕様
ブラウザではデフォルトのドラッグアンドドロップがあります
例えば画像のドラッグアンドドロップ

選択されたテキストのドラッグアンドドロップ

リンクのドラッグアンドドロップ

要素のドラッグ

ブラウザではデフォルトで画像、テキスト、リンクをドラッグできます
他の要素をドラッグすることも可能です
要素タグに属性を追加するだけです

<p draggable="true"></p>

この要素をドラッグすると、ブラウザーに半透明のコピーとして表示されます

ドラッグイベント

ドラッグイベントは2つのカテゴリに分類する必要があります
1つのタイプは、ドラッグされた要素によってトリガーされるイベントです
もう1つのタイプは、トリガーされるイベントですターゲット要素をドラッグすることで

<p id="source" draggable="true"></p><p id="target"></p>  <!-- 样式略 -->

var source = document.getElementById('source');var target = document.getElementById('target');

要素をドラッグする

要素をドラッグすると、ドラッグされた要素によって次のイベントがトリガーされます

• drag

• dラージェンド

• マウスが要素をクリックすると、移動を開始すると、dragstart イベントがトリガーされます (mousedown に似ています) ドラッグ イベントは、ドラッグプロセス中に継続的にトリガーされます (mousemove に似ています)

  マウスを放してキャンセルするとドラッグすると、dragend イベントがトリガーされます (mouseup に似ています)

source.ondragstart = function(){
  console.log('开始拖拽');
}source.ondrag = function(){
  console.log('拖拽中');
}source.ondragend = function(){
  console.log('拖拽结束');
}

ターゲット要素

ドラッグされた要素がターゲット要素上にドラッグされると、ターゲット要素は次のイベントをトリガーします

drangeter

• dragover

• dragleave

• drop

• 要素をターゲットにドラッグすると、dragenter イベントがトリガーされます (マウスオーバーと同様) ドラッグした要素がターゲット要素内では、dragover イベントが引き続きトリガーされます

  ターゲット要素を離れると、dragleave イベントがトリガーされます (マウスオーバーと同様)、mouseout)
要素がターゲット要素にドラッグ アンド ドロップされた場合 (マウスを放します)ターゲット要素) の場合、dragleave イベントの代わりにドロップ イベントがトリガーされます

target.ondragenter = function(){
  console.log('拖动进入目标元素');
}target.ondragover = function(){
  console.log('目标元素中拖拽');
}target.ondragleave = function(){
  console.log('拖动离开目标元素');
}target.ondrop = function(){
  console.log('拖放');
}

この時点で、要素がターゲット要素にドラッグ アンド ドロップされたことがわかります

ドロップ イベントがトリガーされなかった場合

---

特別なカーソル (円 + バックスラッシュ) が表示されました

これは、無効なドラッグ アンド ドロップを意味します

したがって、ドロップ イベントはトリガーされません これは、デフォルトの要素がドラッグ アンド ドロップできないことを意味します

ターゲット要素のドラッグオーバーイベント

のデフォルトイベント
で、問題は解決できます

target.ondragover = function(e){
  console.log('目标元素中拖拽');
  e.preventDefault(); //增}

データ交換
単純なドラッグアンドドロップでは意味がありませんデータ交換を行う必要があります

そして、この用語のデータ交換オブジェクトはイベントオブジェクトの属性

dataTransfer

dataTransfer の 2 つのコアメソッドは setData() と getData() です
setData() はデータの設定に使用され、getData() はデータの受信に使用されます

event.dataTransfer.setData('text','some text');
var text = event.dataTransfer.getData('text');//保存在dataTransfer中的数据只能在drop事件处理函数中处理

text その後、ブラウザはデフォルトで dataTransfer.setData を呼び出し、対応するテキスト データを設定します

setData() と getData() はデータ型の文字列です

"text" テキスト タイプに加えて、IE によって定義されるデータ型も"URL" を含めます

H5 ペア さまざまな MIME タイプを指定するために拡張されました
ただし、下位互換性のために、「text」と「URL」もサポートします

それらは「text/plain」と「text/uri-list」にマッピングされます"それぞれ

データが URL として保存されている場合、ブラウザは特別な処理を実行し、それを Web リンクとして扱います
(そのため、リンクを別のブラウザ ウィンドウにドラッグすると Web ページが開きます)

必要に応じて、転送する必要のあるデータを手動で保存します

var source = document.getElementById('source');var target = document.getElementById('target');
source.ondragstart = function(e){
  e.dataTransfer.setData('text','传递文本数据');
}
target.ondragover = function(e){
  e.preventDefault();
}
target.ondrop = function(e){
  console.log(e.dataTransfer.getData('text'));
}

---

ドラッグ設定

dataTransfer には 2 つの重要な属性があります

dropEffect

と

effectAllowed

dropEffectdropEffect 属性値は文字列であり、どちらのタイプであるかを示します実行の際、ドラッグされた要素は配置動作を実行できます この属性を使用するには、dragenter イベント ハンドラーで設定する必要があります

none 要素をここにドラッグ アンド ドロップすることはできません (テキスト ボックスを除くすべての要素のデフォルト値)

• move ターゲットに移動

• copy ターゲットにコピー

• リンク ターゲットはドラッグ要素を開きます (ドラッグ要素はリンクであり、URL が必要です)

effectAllowed

effectAllowed 属性値も文字列であり、どの DropEffect が要素のドラッグを許可されているかを示します
使用するにはこの属性は

• にある必要があります。ドラッグ アンド ドロップ動作は設定されていません。

• move は、dropEffect 値のみを使用できます。 move

• copyLinkでdropEffect値のコピーとリンクが可能

• copyMoveでdropEffect値のコピーと移動が可能

• linkMoveでdropEffect値のリンクと移動が可能

• all 任意のdropEffectを許可

以上がHTML5 要素のドラッグ アンド ドロップ (画像とテキスト) に関連する API の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。