Drag and Dropを使用してWebアプリケーションのインタラクティブな体験を向上

5544 ワード
draganddrop vue.js html
Drag and Drop(ドラッグ＆ドロップ)とは?
簡単に言えば、HTML 5はDrag and DropAPIを提供し、ユーザーがマウスでドラッグ可能な要素を選択し、マウスを移動して要素にドラッグできるプロセスを提供している.
ブラウザの複数のラベルページ間のドラッグアンドドロップ可能なソート、携帯電話のAppのドラッグアンドドロップ可能なソートなど、誰もがドラッグアンドドロップに接触したことがあると信じています.Drag and Dropより便利で柔軟なネットワークアプリケーション体験を提供しています.
HTML5 Drag and Drop DnDイベントベースのドラッグアンドドロップメカニズムとタグ付けを定義し、ページ上のほとんどの要素をタグ付けするdraggableの要素タイプ、典型的なdrag操作は、ユーザーがマウスでドラッグ可能な要素を選択し、マウスを配置可能な要素に移動し、マウスを解放することから始まる.操作中にイベントタイプがトリガーされ、dragやdragoverイベントタイプなど、複数回トリガーされるイベントタイプがあります.
まとめると簡単です.Drag Source(What to drag) => Drop Target(Where to drop)
ドラッグイベント
すべてのドラッグイベントは1つglobal event handler、Dnd APIは1つに8つのイベントがあり、Drag Sourceにバインドされた3つ、Drag Targetにバインドされた5つに分けられる
Drag Source
Event
Description
dragstart
ユーザーが要素または選択したテキストをドラッグし始めるとトリガーされます.
drag
要素または選択したテキストをドラッグするとトリガーされます.
dragend
ドラッグ操作が終了するとトリガーされます(マウスボタンを放したり、Escキーを押したりします).
Drop Target
Event
Description
dragenter
エレメントまたは選択したテキストを解放可能なターゲットにドラッグするとトリガーされます.
dragover
要素または選択したテキストが解放可能なターゲットにドラッグされるとトリガーされます(100ミリ秒ごとにトリガーされます).
dragexit
要素がドラッグ操作の選択されたターゲットでなくなったときにトリガーされます.
dragleave
要素をドラッグしたり、選択したテキストが解放可能なターゲットから離れたりするとトリガーされます.
drop
エレメントまたは選択したテキストが解放可能ターゲットで解放されるとトリガーされます.
注意点
  • マウスのドラッグ＆ドロップ操作中に、複数のイベントがトリガーされる可能性がある(例:dragおよびdragover).使用時のブレや絞りに注意
  • dragoverイベントで使用event.preventDefault()デフォルトのイベント行為を阻止した場合にのみ、正しくトリガーされるdropイベント
  • Firefoxブラウザでdropをトリガーする場合に使用するevent.preventDefault()デフォルトのイベント動作をブロックし、新しいラベルが開かないようにする
    • データインタフェース
    HTMLドラッグのデータインタフェースは3つDataTransfer・DataTransferItemとDataTransferItemListがあります.
    ドラッグ＆ドロップ操作を行う場合、DataTransferオブジェクトを保存し、ドラッグ＆ドロップ操作でブラウザのデータにドラッグします.1つ以上のデータ、1つ以上のデータ型、または複数のデータ型を保存できます.
    DataTransfer共通プロパティ
    ツールバーの
    を選択します.
    説明
    dropEffect
    String
    実際の配置効果を取得/設定するには、常にeffectAllowedの可能な値の1つに設定する必要があります.copymovelink・none・
    effectAllowed
    String
    ドラッグ時に許可される効果を指定します.
    Files
    FileList
    格納されたデータのタイプリストを最初の項目として保存し、追加されたデータの順序と一致します.データが追加されていない場合は、空のリストが返されます.
    types
    DOMStringList
    データ転送で使用可能なすべてのローカルファイルのリストが含まれます.ドラッグ操作がファイルのドラッグに関係しない場合、このプロパティは空のリストです.
    DataTransferの一般的な方法
  • void clearData([in String type])
  • String getData(in String type)
  • void setData(in String type, in String data)
  • void setDragImage(in nsIDOMElement image, in long x, in long y)

    • 注意点
  • 定義MIME(Multipurpose Internet Mail Exchange)でデータ転送タイプを指定します.例えば:text/plain
    • きのうけんしゅつ
    HTML 5 DnD APIを用いて実現したい豊富なインタラクティブなアプリケーションを想像してみてください.結局ブラウザがサポートされていないので、大変ではないでしょうか.ダウングレードスキームを使用する必要があるかどうかは、非常に重要な参考になります.
    次の2つの一般的な方法で検出を支援します.
    caniuse
    Modernizr
    Modernizrは、ユーザーブラウザがHTML5およびCSS3機能をサポートしているかどうかを検出するのに優れたライブラリです.
    if (Modernizr.draganddrop) {
  // Browser supports HTML5 DnD.
} else {
  // Fallback to a library solution.
}

    ドラッグ＆ドロップを実現
    HTML Attribute
    ドラッグエレメントを実現するにはdomタグにのみdraggable="true"

    CSS User Interface

    user-select

    可拖拽元素，建议使用 user-select，避免用户在拖拽时选取到内部元素。

    [draggable="true"] {
  /*
   To prevent user selecting inside the drag source
  */
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

    cursor
    ドラッグ可能エレメント、推奨使用cursor、ドラッグ可能エレメントのマウスカーソルを設定し、インタラクションを向上させる.
    [draggable="true"] {
  cursor: move;
}

    Vueでドラッグ&ドロップを使用する
    Vueでdndを使用すると、eventコンポーネントに直接バインドできます.
    次の栗の内容は次のとおりです.
  • Vueによるドラッグ＆ドロップ
  • ドラッグアンドドロップイベントおよびイベントトリガーのタイミング
  • ドラッグアンドドロップイベントのいくつかの効果処理
  • システムファイルをブラウザにドラッグ・アンド
    • https://codesandbox.io/embed/...
    DnDは何ができますか?
  • Web上での操作インタラクティブ体験の向上
  • リスト並べ替え機能提供
  • 自機とブラウザのやりとり
  • HTML 5ゲーム
  • ...もっと
    • いくつかの悪くないDnDライブラリを推薦します
  • interact.js - JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+)
  • Sortable - Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices.
  • draggable - The JavaScript Drag & Drop library your grandparents warned you about.
  • Vue.Draggable - Vue component allowing drag-and-drop sorting in sync with View-Model. Based on Sortable.js
  • vue-grid-layout - A draggable and resizable grid layout, for Vue.js.
  • vue-draggable-resizable - Vue2 Component for draggable and resizable elements.
  • react-dnd - Drag and Drop for React
  • react-beautiful-dnd - Beautiful and accessible drag and drop for lists with React
  • react-grid-layout - A draggable and resizable grid layout with responsive breakpoints, for React.

    • リファレンス
    Mozilla HTML_Drag_and_Drop_API
    Native HTML5 Drag and Drop
    caniuse
    Working with HTML5 Drag-and-Drop
    译文:Drag and Dropを使用してWebアプリケーションにインタラクティブな体験を向上させる
    Webpakの最も完全な簡単な入門
    App埋め込みwebviewピット