実際、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事件处理函数中处理

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

データが 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 つの重要な属性があります

と

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

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

• move ターゲットに移動

• copy ターゲットにコピー

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

effectAllowed

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

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

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

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

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

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

• all 任意のdropEffectを許可

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