Drag-and-Drop — comment le glisser-déposer fonctionne dans les applications mobiles

Qu’est-ce que le Drag-and-Drop ?

Drag-and-Drop (DnD) est une méthode de manipulation d’éléments d’interface graphique où l’utilisateur saisit un objet avec son doigt ou sa souris, le déplace vers une autre position et le relâche. Dans les interfaces mobiles, le Drag-and-Drop est généralement initié par un appui long — l’utilisateur maintient l’élément enfoncé pendant 300–500 ms, après quoi le système bascule l’interface en mode glissement, et le mouvement du doigt déplace l’objet.

Historiquement, le Drag-and-Drop est apparu dans les interfaces de bureau (Xerox Star, 1981 ; Macintosh, 1984) comme alternative aux commandes copier/coller. Sur les plateformes mobiles, le support complet est apparu dans iOS 11 (2017) avec UIDragInteraction et dans Android 7.0 (2016) avec le Multi-Window Drag-and-Drop. Avant cela, le glissement dans les applications mobiles était implémenté par des solutions personnalisées via des reconnaissanceurs de gestes.

Concepts clés : session de glissement (drag session), éléments glissables (drag items), aperçu de glissement (drag preview — représentation visuelle de l’objet), zone de dépôt (drop target), proposition de dépôt (drop proposal — action au dépôt : déplacer, copier, lier). Le système gère la session au niveau du système d’exploitation, permettant de glisser des objets entre différentes applications (par exemple, une photo de la Galerie vers Notes).

Phases du Drag-and-Drop

Drag-and-Drop est divisé en trois phases séquentielles. Phase 1 — Saisir (Début du glissement) : l’utilisateur initie le geste (généralement un appui long), le système crée une session de glissement, capture les données de l’objet et affiche un aperçu de glissement — une copie semi-transparente de l’élément qui suit le doigt. Dans cette phase, le système rejette les autres gestes (défilement, sélection de texte) jusqu’à la fin du DnD.

Phase 2 — Déplacer (Mouvement de glissement) : le doigt se déplace sur l’écran, l’aperçu de glissement suit le point de contact. Le système détermine en continu la zone de dépôt sous le doigt et envoie des événements drag-enter, drag-move et drag-exit. La zone de dépôt peut réagir visuellement : se mettre en surbrillance, s’agrandir ou montrer une ligne d’insertion. Cette phase dure de 0,5 à 10+ secondes selon la complexité de la tâche.

Phase 3 — Relâcher (Dépôt) : le doigt se soulève de l’écran. Le système termine la session de glissement et appelle le callback de dépôt sur l’élément cible. Si la zone de dépôt rejette le dépôt (par exemple, glisser un fichier dans un dossier sans droits d’écriture), l’aperçu de glissement retourne animé à sa position d’origine (animation d’annulation). Si le dépôt est accepté, l’élément disparaît de sa position d’origine et apparaît à la cible.

Glissement inter-applications est une fonctionnalité disponible sur les deux plateformes. iOS prend en charge le Drag-and-Drop entre applications en mode Split View et Slide Over (iPad). Android prend en charge le glissement entre applications en mode Split Screen. Les données sont transférées via UIPasteConfiguration (iOS) ou ClipData (Android). Le développeur spécifie les types de données pris en charge (UTI pour iOS, MIME pour Android).

Drag-and-Drop sur iOS : UIDragInteraction

UIDragInteraction est l’API iOS principale pour le glissement, ajoutée dans iOS 11. Pour activer le glissement depuis une View, ajoutez UIDragInteraction avec UIDragInteractionDelegate. Le délégué définit quels éléments sont glissables, leur apparence et leur comportement. Pour recevoir des éléments, utilisez UIDropInteraction avec UIDropInteractionDelegate, qui détermine si la View peut accepter un dépôt et comment traiter les données.

// UIDragInteraction — glisser un élément d’une collection
class DragViewController: UIViewController, UIDragInteractionDelegate {

    @IBOutlet var dragSourceView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        let dragInteraction = UIDragInteraction(delegate: self)
        dragSourceView.addInteraction(dragInteraction)
    }

    func dragInteraction(_ interaction: UIDragInteraction,
                          itemsForBeginning session: UIDragSession) -> [UIDragItem] {

        guard let data = Data(contentsOf: selectedFileURL) else { return [] }

        let itemProvider = NSItemProvider(object: data as NSData)
        let dragItem = UIDragItem(itemProvider: itemProvider)

        // Aperçu de glissement — une copie réduite de l’élément
        dragItem.previewProvider = {
            let previewView = UIImageView(image: thumbnailImage)
            previewView.alpha = 0.8
            return UIDragPreview(view: previewView)
        }
        return [dragItem]
    }
}

UIDropInteractionDelegate est l’interface miroir pour recevoir les dépôts. La méthode canHandle(_:) vérifie si le type de données est pris en charge. sessionDidUpdate(_:) met à jour visuellement l’état (surbrillance, ligne d’insertion). performDrop(_:) effectue le traitement final des données. iOS appelle automatiquement UIDropProposal avec le type d’opération : .move, .copy ou .forbidden. Le type d’opération affecte l’affichage visuel (une icône + dans le coin de l’aperçu pour la copie, un signe d’interdiction pour forbidden).

Drag-and-Drop sur Android : startDragAndDrop

View.startDragAndDrop() est la méthode Android SDK pour démarrer un glissement, disponible depuis l’API 24 (Android 7.0). Elle est appelée après avoir saisi l’élément (généralement dans onLongClick). Paramètres : ClipData (données), DragShadowBuilder (ombre visuelle), Object myLocalState (état local), flags. DragShadowBuilder crée un Bitmap qui suit le doigt. Le système gère automatiquement les animations et les événements tactiles pendant le glissement.

// Drag-and-Drop d’un élément RecyclerView avec réorganisation
class ReorderAdapter(private val items: MutableList<String>) :
    RecyclerView.Adapter<ReorderAdapter.ViewHolder>() {

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.itemView.setOnLongClickListener {
            // Création de ClipData pour le transfert de données
            val clipData = ClipData.newPlainText("item", items[position])

            // DragShadowBuilder personnalisé avec aperçu réduit
            val shadowBuilder = object : View.DragShadowBuilder(holder.itemView) {
                override fun onProvideShadowMetrics(shadowSize: Point, shadowTouchPoint: Point) {
                    shadowSize.set(itemView.width, itemView.height / 2)
                }
            }

            holder.itemView.startDragAndDrop(clipData, shadowBuilder, position, 0)
            true
        }
    }
}

Réception d’un dépôt sur Android est implémentée via View.setOnDragListener(). L’écouteur reçoit les événements ACTION_DRAG_STARTED, ACTION_DRAG_ENTERED, ACTION_DRAG_LOCATION, ACTION_DRAG_EXITED, ACTION_DROP et ACTION_DRAG_ENDED. Dans l’événement ACTION_DROP, les données sont extraites de ClipData et l’action cible est exécutée. Pour RecyclerView avec réorganisation, ItemTouchHelper.SimpleCallback est recommandé — un mécanisme intégré qui gère automatiquement l’appui long pour la saisie, l’animation de mouvement et les méthodes utilitaires onMove/onSwiped.

Cas d’utilisation du Drag-and-Drop

Réorganisation de listes (drag to reorder) est le scénario DnD le plus courant : les utilisateurs font glisser des éléments de liste pour changer leur ordre. Exemples : réorganiser les contacts dans les favoris, trier les tâches dans les trackers (Trello, Todoist), réorganiser les pistes dans une playlist (Spotify, Apple Music). Implémenté via ItemTouchHelper sur Android ou UILongPressGestureRecognizer avec réorganisation de cellules sur iOS.

Gestionnaires de fichiers — Drag-and-Drop pour copier et déplacer des fichiers entre dossiers. iOS Files App, Android Files by Google, Dropbox — tous prennent en charge DnD. Faire glisser un fichier sur un dossier le déplace à l’intérieur (move), faire glisser avec Option/Ctrl enfoncé le copie (copy). La zone de dépôt se met visuellement en surbrillance au survol, montrant les limites du dossier.

Tableaux Kanban — Trello, Jira, Notion utilisent le Drag-and-Drop pour déplacer des cartes entre colonnes (To Do → In Progress → Done). Lors du glissement, la carte se détache de sa colonne d’origine, suit le doigt, et lorsqu’elle franchit la limite d’une autre colonne, elle s’insère avec une animation. iOS 11+ prend en charge UIDragPreview avec effet de parallaxe, où l’aperçu s’incline légèrement par rapport au point de contact, créant de la profondeur.

Sections Springboard (iOS) — glisser les icônes d’applications sur l’écran d’accueil iOS. Un appui long sur une icône active le mode « secouement » (les icônes tremblent), après quoi l’utilisateur peut déplacer les icônes entre les pages et créer des dossiers. C’est l’un des modèles UX DnD les plus complexes car il nécessite de gérer simultanément le glissement, l’animation de tremblement et le regroupement en dossiers.

Recommandations UX pour le Drag-and-Drop

Retour visuel est d’une importance cruciale pour le Drag-and-Drop. L’objet glissé doit changer : rétrécir (iOS : échelle 0,8–0,9), devenir semi-transparent (alpha 0,7–0,8) et s’élever au-dessus de l’interface avec une ombre (shadow offset). La zone de dépôt doit réagir visuellement au survol : se mettre en surbrillance, s’agrandir ou montrer une bordure. Sans ces signaux, l’utilisateur ne peut pas savoir où déposer l’objet.

Animation de retour (annulation de glissement) — si l’utilisateur relâche l’élément en dehors de la zone de dépôt ou sur une zone invalide, l’objet doit retourner animé à sa position d’origine. iOS UIDragInteractionDelegate fournit dragInteraction(_:sessionDidMove:) pour le suivi et dragInteraction(_:session:willEndWith:) pour l’animation de retour. Android View.setOnDragListener reçoit ACTION_DRAG_ENDED, où une animation de retour peut être lancée via ValueAnimator ou ObjectAnimator.

Accessibilité : les utilisateurs ayant des limitations motrices peuvent ne pas être capables d’effectuer le geste de glissement. Fournissez des alternatives via des boutons « Déplacer vers le haut/bas » pour les listes et un menu contextuel « Déplacer vers le dossier » pour les fichiers. iOS VoiceOver prend en charge l’action de rotation « Glisser » pour déplacer des éléments. Android TalkBack fournit des actions personnalisées via AccessibilityNodeInfo.addAction(). Nike Run Club et Apple Health utilisent DnD pour réorganiser les métriques sur le tableau de bord — avec un accès via des boutons standard.