Drag and Drop

https://developer.apple.com/design/human-interface-guidelines/ios/user-interaction/drag-and-drop/

With a single finger, a user can move or duplicate selected photos, text, or other content by dragging the content from one location to another, then raising the finger to drop it.

一本指で、ユーザは、選択された写真、テキスト、または他のコンテンツを、ある場所から別の場所にドラッグして移動したり複製したりすることができます。

Play

Touching and holding selected content makes it appear to rise and adhere to the user's finger. As the content is dragged, animations and visual cues identify possible destinations. The system also displays a badge that indicates when dropping isn’t possible, or will result in duplicating the content rather than moving it. For developer guidance, see Drag and Dropin UIKit.

選択したコンテンツをタッチ&ホールドすると、それが浮き上がってユーザーの指に付着しているように見えます。コンテンツがドラッグされると、アニメーションや視覚的な手がかりによって可能なドロップ先が識別されます。また、ドロップ不可能な場合にはバッジ（不可マーク）が表示されます。または、コンテンツを移動するのではなく複製することになります。開発者向けのガイダンスについては、UIKitのドラッグアンドドロップを参照してください。

Sources and Destinations

ソースと目的地

Drag and drop involves moving selected content from a source location to a destination. These locations can be in the same container, like a text view, or in different containers, like text views on opposite sides of a split view. In Notes, for example, the user can drag selected text to a new location within the same note. In Reminders, the user can drag individual reminders out of one list and drop them into another.

ドラッグアンドドロップでは、選択したコンテンツをソースの場所から目的地に移動します。これらの場所は、テキストビューのような同じコンテナ内にも、スプリットビューの反対側にあるテキストビューのような異なるコンテナ内にも置くことができます。たとえば、Notesでは、選択したテキストを同じノート内の新しい場所にドラッグできます。リマインダーでは、ユーザーは個々のリマインダーを1つのリストからドラッグして別のリストにドロップできます。

On iPad, source and destination locations can also exist in different apps, enabling cross-app interactions like dragging a photo from a webpage in Safari to a new message in Mail. While dragging content, the user can access another app through multitasking, exiting to the Home screen, or swiping up from the bottom of the screen to reveal the Dock.

iPadでは、送信元と送信先の場所を異なるアプリにすることも可能なので、Safariのウェブページの写真をMailの新しいメッセージにドラッグするなどのアプリケーション間のやりとりが可能です。コンテンツをドラッグしている間、ユーザーはマルチタスキング（ホーム画面、または画面の下からスワイプしてDockを表示）機能によって、別のアプリにアクセスできます。

NOTEDragging and dropping content between apps always results in duplication, not movement, of content.

注意
アプリケーション間でコンテンツをドラッグアンドドロップすると、コンテンツの移動ではなく複製が常に発生します。

Supporting Drag and Drop

ドラッグアンドドロップをサポートする

Drag and drop is an efficient, intuitive feature that users expect to be implemented pervasively throughout the system. If your app includes or produces text, photos, video, audio, or other content that people might want to move, copy, or insert, your app should support drag and drop.

ドラッグアンドドロップは、効率的で直観的な機能であり、ユーザーがシステム全体に広範囲に実装することを期待しています。あなたのアプリがテキスト、写真、ビデオ、オーディオ等の、移動やコピー、挿入したいかもしれない他のコンテンツを含んでいる場合、あなたのアプリはドラッグアンドドロップをサポートする必要があります。

Make drag and drop available for all selectable and editable content. Selectable content should be draggable, and editable content should accept dropped content. Also make sure your app supports copy and paste in these areas.

選択可能で編集可能なすべてのコンテンツに対して、ドラッグ＆ドロップを使用できるようにします。 選択可能なコンテンツはドラッグ可能でなければならず、編集可能なコンテンツはドロップされたコンテンツを受け入れるべきです。また、アプリがこれらの領域にコピー＆ペーストをサポートしていることを確認してください。

Allow content to be dropped on controls when applicable. In general, configure controls that enable data entry or selection, like text fields, to accept dropped content.

該当する場合、コントロールにコンテンツをドロップすることを許可します。 一般に、テキストフィールドなどのデータの入力や選択をできるコンテンツでは、ドロップされたコンテンツを受け入れるように設定します。

Use standard text views and text fields whenever possible. These system-provided elements include built-in support for drag and drop. For related guidance, see Text Fieldsand Text Views. For developer guidance, see UITextField and UITextView.

可能であれば必ず、標準のテキストビューとテキストフィールドを使用してください。 これらのシステム提供要素には、ドラッグアンドドロップの組み込みサポートが含まれています。関連するガイダンスについては、「テキストフィールドとテキストビュー」を参照してください。開発者ガイダンスについては、UITextFieldおよびUITextViewを参照してください。

For greater efficiency, consider supporting multi-item drag and drop. In many apps, the user can drag a single item with one finger, and while dragging, select additional items by tapping them with another finger. The selected items move together and appear stacked beneath the finger that's dragging the original item. The user then drags the items as a group and drops them over the desired destination. For example, the Home screen allows multiple app icons to be selected and dragged into a folder all at once. Some apps, like Photos, offer a selection mode that enables the selection of multiple items prior to dragging.

効率を高めるには、複数項目のドラッグアンドドロップをサポートすることを検討してください。 多くのアプリでは、ユーザーは1本の指で1つのアイテムをドラッグし、ドラッグしている間に別の指でタップして追加のアイテムを選択できます。選択した項目が一緒に移動し、元の項目をドラッグしている指の下に積み重なって表示されます。ユーザは、アイテムをグループとしてドラッグし、それらを所望の目的地にドロップする。たとえば、ホーム画面では、複数のアプリアイコンを選択して一度にフォルダにドラッグできます。 Photosのような一部のアプリでは、ドラッグする前に複数の項目を選択できる選択モードが用意されています。

Determine whether dragging and dropping content within your app should result in a move or a copy. In general, a move makes sense when the source and destination containers are the same (dragging text within a document), and a copy makes sense when they’re different (dragging between documents, or between apps). This isn’t always the case, however. Above all, drag and drop should behave intuitively. In Reminders, dragging reminders between lists moves them instead of copying them because that’s what people expect. Dragging and dropping content between apps always results in a copy.

アプリ内のコンテンツをドラッグアンドドロップすると、移動またはコピーが発生するかどうかを判断します。 一般的に、移動元と移動先のコンテナが同じである場合（ドキュメント内のテキストをドラッグする）は移動、異なる場合（ドキュメント間またはアプリケーション間でドラッグする）はコピーをします。しかし、必ずしもそうではありません。とりわけ、ドラッグ＆ドロップは直感的に動作するものです。リマインダーでは、リマインダーをリスト間でドラッグすると、リマインダーをコピーする代わりに、リマインダを移動させることができます。アプリケーション間でコンテンツをドラッグ＆ドロップすると、常にコピーが作成されます。

Whenever possible, let people undo drag and drop. Generally, when users inadvertently drop content in the wrong destination, they should be able to use Undo to return your app to its previous state. That is, the dropped content should be removed and, if it was moved from elsewhere in your app, restored to its original location.

可能な限り、アンドゥー可能にします。 一般的に、誤って目的地にコンテンツをドロップした場合、Undo操作で元の状態に戻ることができます。つまり、移動操作によってコンテンツを削除し、アプリ内の他の場所から移動した場合は、元の場所に復元する必要があります。

Consider enabling spring loading. With spring loading, users can activate certain controls, like buttons and segmented controls, by dragging selected content over them and pausing briefly without dropping the content. For example, in Mail, selected messages can be dragged onto the navigation bar’s Back button to reach other locations in the mailbox hierarchy. Never make spring loading the only way to activate a control. Use it as an embellishment that can be discovered. In most cases, a spring-loaded control should also respond to a tap gesture. For developer guidance, see UISpringLoadedInteraction.

スプリングローディングを有効にすることを検討します。 スプリングローディングを使用すると、ユーザーは選択したコンテンツをドラッグしたり、コンテンツをドロップせずに一時停止したりすることで、ボタンやセグメント化されたコントロールなどの特定のコントロールをアクティブにできます。たとえば、メールでは、選択したメッセージをナビゲーションバーの[戻る]ボタンにドラッグすると、メールボックス階層内の他の場所にアクセスできます。スプリングローディングをコントロールをアクティブにする唯一の方法にしてはいけません。機能に気づくための付加動作として使用してください。ほとんどの場合、スプリングローディングコントロールはタップジェスチャーにも対応する必要があります。開発者ガイダンスについては、「UISpringLoadedInteraction」を参照してください。

（最終更新日：2018.10.05）

Providing Dragged Content

ドラッグされたコンテンツの提供

Customize the drag item preview if necessary. In general, the preview that’s displayed under the user’s finger should be a translucent representation of the content being dragged. This appearance provides context, indicates that a drag is in progress, and enables the user to see destinations beneath the dragged content.

必要に応じてドラッグ項目のプレビューをカスタマイズします。 一般に、ユーザーの指の下に表示されるプレビューは、ドラッグされているコンテンツの半透明の表現である必要があります。この外観はコンテキストを提供し、ドラッグが進行中であることを示し、ドラッグされたコンテンツの下の宛先をユーザが見ることを可能にします。

Whenever possible, offer multiple representations of dragged data, ordered from highest to lowest fidelity. For example, when providing line art, your app could offer a PDF vector representation, a lossless PNG image with transparency, and a lossy JPEG image without transparency, in that order. That way, the destination can choose the highest quality representation that it can import.

可能であれば、ドラッグしたデータの表現を最高から最低の順で複数提供します。 たとえば、ラインアートを提供するとき、あなたのアプリはPDFベクタ表示、透明度を持つロスレス PNG画像、透過性のない損失のあるJPEG画像をその順序で提供することができます。このようにして、宛先はインポートできる最高品質の表現を選択できます。

When applicable, present native versions of custom objects as the richest form of data. For example, an app that lets people drag charts should present the native chart object first. Then, it should offer alternatives—like image versions of the chart—for apps that don’t support chart objects.

該当する場合は、ネイティブバージョンのカスタムオブジェクトを最も豊富なデータ形式で表示します。 たとえば、グラフをドラッグできるようにするアプリでは、ネイティブチャートオブジェクトを最初に表示する必要があります。次に、チャートオブジェクトをサポートしていないアプリケーションのために、チャートのイメージバージョンのような代替案を提供する必要があります。

Implement a file provider extension when the transfer of your app’s content is time consuming or resource intensive. A file provider extension manages the transfer process and ensures that it completes, even if your app is no longer running. Note that the transfer process doesn’t begin until the user drops the content. For developer guidance, see NSFileProviderExtension.

アプリケーションのコンテンツの転送に時間がかかり、リソースを大量に消費する場合は、ファイルプロバイダ拡張を実装します。ファイルプロバイダの拡張機能は、アプリがもう実行されなくても、転送プロセスを管理し、ファイルシステムの完了を保証します。転送プロセスは、ユーザーがコンテンツを削除するまで開始されないことに注意してください。開発者ガイダンスについては、「NSFileProviderExtension」を参照してください。

Supply progress information when your app’s content needs time to transfer.Provide progress information if content must be downloaded or large files require time to copy. At minimum, provide the total size of the content so the destination can calculate the amount of time remaining and display an appropriate progress indicator. For developer guidance, see NSProgress.

あなたのアプリのコンテンツを転送する時間が必要なときに進捗情報を提供します。コンテンツをダウンロードする必要があるか、大きなファイルにコピーする時間が必要な場合は、進捗情報を提供します。最低でも、コンテンツの合計サイズを指定して、宛先が残り時間を計算し、適切な進行状況インジケータを表示できるようにします。開発者向けのガイダンスについては、NSProgressを参照してください。

Accepting Dropped Content

ドロップされたコンテンツの受け入れ

Use visual cues to identify potential destinations and preview the effect of dropping content. Highlighting, insertion point indicators, and animation are all good ways to identify possible destinations. A view could subtly flash and change color as content is dragged over it, or paragraphs could move apart to make room for a dragged image. When there is more than one possible destination onscreen, identify one at a time. Highlighting may be unnecessary if the source and destination containers are the same, unless the content is dragged completely out of the source and then reenters it. Make sure highlighting is removed when content is dropped or is no longer positioned above a destination.

視覚的手がかりを使用して、潜在的な目的地を特定し、コンテンツを削除する効果をプレビューします。 ハイライト、挿入ポイントインジケータ、およびアニメーションは、すべて可能な宛先を識別する適切な方法です。ビューがコンテンツをドラッグすると、ビューが微妙に点滅して色が変わることがあります。または、ドラッグしたイメージのためのスペースを確保するためにパラグラフを移動することもできます。画面に複数の可能な目的地がある場合は、一度に1つを特定します。コンテンツがソースから完全にドラッグアウトされてから再入されない限り、ソースコンテナと宛先コンテナが同じである場合は、ハイライト表示は不要です。コンテンツが落とされたとき、または目的地の上に配置されていないときは、強調表示が削除されていることを確認します。

Automatically scroll the contents of a destination when appropriate. When content is dragged outside the bounds of a destination, your app may need to determine whether to scroll the contents of the destination or to allow the user to continue dragging to an entirely different destination. If your app lets the user continue dragging, consider defining a region that causes automatic scrolling when the dragged item is positioned above it. For example, a lengthy draft message in Mail automatically scrolls when content is dragged to the top or bottom of the body area. Standard text views and text fields automatically adopt this behavior.

必要に応じて目的地のコンテンツを自動的にスクロールします。 コンテンツを目的地の外にドラッグすると、目的地のコンテンツをスクロールするか、まったく別の目的地にドラッグを続けるかどうかをアプリケーションが判断する必要が生じる場合があります。アプリでドラッグを続けることができる場合は、ドラッグされたアイテムがその上に配置されているときに自動スクロールする領域を定義することを検討してください。たとえば、メール内のメッセージが長すぎると、コンテンツが本体領域の上部または下部にドラッグされたときに自動的にスクロールします。標準のテキストビューとテキストフィールドでは、自動的にこの動作が適用されます。

Extract and display the richest possible representation of dropped content. For example, your app might be offered several representations of a chart. If your app supports charts, it could extract and display the native chart object. If your app doesn’t support charts, it could extract and display an image version of the chart instead.

ドロップされたコンテンツの最もリッチな表現を抽出して表示します。 たとえば、アプリに複数の表が表示されることがあります。あなたのアプリがチャートをサポートしている場合、ネイティブチャートオブジェクトを抽出して表示することができます。あなたのアプリがチャートをサポートしていない場合、チャートのイメージバージョンを抽出して表示することができます。

When applicable, extract only the relevant portion of dropped content. For example, if a user drags a contact from Contacts to a recipient field in a Mail message, only the name and email address are used, not the contact’s address information.

該当する場合、ドロップされたコンテンツの関連部分のみを抽出します。 たとえば、連絡先から連絡先をメールメッセージの受信者フィールドにドラッグすると、連絡先のアドレス情報ではなく名前と電子メールアドレスだけが使用されます。

Show placeholders in table views and collection views after content is dropped.Placeholders temporarily indicate where the content will reside once it finishes transferring.

コンテンツが削除された後のプレースホルダをテーブルビューおよびコレクションビューに表示します。プレースホルダは、コンテンツの転送が完了すると、コンテンツがどこに置かれるかを一時的に示します。

Show progress when dropped content needs time to transfer. By default, the system displays an app-modal alert when a time-consuming transfer occurs between apps. Consider customizing the way progress is displayed—such as by showing progress indicators on placeholders within a table view or collection view—so the user isn’t blocked from using your app. Note that the transfer process doesn’t begin until the user drops the content.

ドロップされたコンテンツの転送に時間が必要な場合は、進行状況を表示します。 デフォルトでは、アプリ間で時間のかかる転送が発生すると、アプリモーダルアラートが表示されます。テーブルビューまたはコレクションビュー内のプレースホルダに進捗インジケータを表示するなど、進行状況が表示される方法をカスタマイズすることを検討して、ユーザーがあなたのアプリケーションの使用をブロックされないようにします。転送プロセスは、ユーザーがコンテンツをドロップするまで開始されないことに注意してください。

Provide feedback when dropped content initiates a process. If the user drops content onto a control that initiates a task—for example, uploading a video to a sharing site—show that the task has begun and keep the user informed of its progress.

ドロップされたコンテンツがプロセスを開始したときにフィードバックを提供します。 ユーザーがタスクを開始するコントロール（たとえば、共有サイトにビデオをアップロードする）にコンテンツをドロップすると、タスクが開始されたことが示され、その進行状況がユーザーに通知されます。

Inform the user when dropping fails. If the dropped content can’t be inserted, perhaps because a file transfer was interrupted, inform the user that the drop was unsuccessful.

失敗したときにユーザーに通知します。 ドロップされたコンテンツを挿入できない場合、ファイル転送が中断された等の理由を、ドロップが失敗したことをユーザーに通知します。

Apply appropriate styling to dropped text. When the source and destination support the same styled text attributes, dropped text should maintain its original font, typeface, size, and other attributes. Otherwise, dropped text should adopt the destination’s style.

ドロップされたテキストに適切なスタイルを適用します。 ソースとデスティネーションが同じスタイル付きテキスト属性をサポートする場合、ドロップされたテキストは元のフォント、書体、サイズ、およびその他の属性を維持する必要があります。それ以外の場合、ドロップされたテキストは宛先のスタイルを採用する必要があります。

Consider providing a subtle, intuitive way to opt out when the user can't immediately undo drag and drop. A sharing app, for example, might present an intermediate share sheet before posting dropped content. This share sheet could offer a way to supply additional content like a status message, while also offering a cancellation button. Photos exhibits this behavior when a photo is dragged into a shared photo stream.

ユーザーがドラッグアンドドロップを直ちにUndoできないときには、繊細で直感的な方法で操作をキャンセルできることを検討してください。 たとえば、共有アプリケーションでは、削除されたコンテンツを投稿する前に中間共有シートを提示することがあります。このシェアシートは、ステータスメッセージのような追加のコンテンツを提供する方法を提供し、キャンセルボタンも提供します。写真は、共有写真ストリームにドラッグされたときにこの現象を示します。