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

黄舟
リリース: 2017-03-11 15:58:27
オリジナル
1796 人が閲覧しました

実際、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(&#39;source&#39;);var target = document.getElementById(&#39;target&#39;);
ログイン後にコピー

要素をドラッグする

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

  • drag

  • dラージェンド

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

    マウスを放してキャンセルするとドラッグすると、dragend イベントがトリガーされます (mouseup に似ています)
  • source.ondragstart = function(){
      console.log(&#39;开始拖拽&#39;);
    }source.ondrag = function(){
      console.log(&#39;拖拽中&#39;);
    }source.ondragend = function(){
      console.log(&#39;拖拽结束&#39;);
    }
    ログイン後にコピー



ターゲット要素

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

drangeter

  • dragover

  • dragleave

  • drop

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

    ターゲット要素を離れると、dragleave イベントがトリガーされます (マウスオーバーと同様)、mouseout)
  • 要素がターゲット要素にドラッグ アンド ドロップされた場合 (マウスを放します)ターゲット要素) の場合、dragleave イベントの代わりにドロップ イベントがトリガーされます
target.ondragenter = function(){
  console.log(&#39;拖动进入目标元素&#39;);
}target.ondragover = function(){
  console.log(&#39;目标元素中拖拽&#39;);
}target.ondragleave = function(){
  console.log(&#39;拖动离开目标元素&#39;);
}target.ondrop = function(){
  console.log(&#39;拖放&#39;);
}
ログイン後にコピー




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

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



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

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

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

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

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

target.ondragover = function(e){
  console.log(&#39;目标元素中拖拽&#39;);
  e.preventDefault(); //增}
ログイン後にコピー

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

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

dataTransfer

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

event.dataTransfer.setData(&#39;text&#39;,&#39;some text&#39;);
var text = event.dataTransfer.getData(&#39;text&#39;);//保存在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(&#39;source&#39;);var target = document.getElementById(&#39;target&#39;);
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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!