Faire une popup draggable avec JQuery Mobile

Pour Colony9, tout comme pour RollAndCrawl, j’ai prévu dans mon interface des popups pour signaler des informations ou pour proposer des choix. Toutefois, notamment pour celles proposant des choix, la possibilités de consulter les informations du « plateaux de jeu » en arrière plan de la popup reste importante pour le joueur. Du genre « Est ce que je vais prendre des ressources Technologiques ou plutôt Biologique pour mon gain du tour ? ». Histoire de laisser une vision globale du plateau de jeu à l’arrière plan, j’ai voulu que mes popups soient déplaçables dans la page.

Rendre une popup draggable est relativement simple :
HTML :

<div data-role="popup" id="popupText" data-position-to="window" class="popup-draggable">
    <div data-role="header">
        <h2 id="popupTextTitre"></h2>
    </div>
    <div class="ui-content" data-role="content">
        <div id="popupTextContent">
        </div>
        <a href="#" id="popupTextClose" data-role="button" data-rel="back" data-inline="true">
            Continue
        </a>
    </div>
</div>

JavaScript :

$(function () {
    $('.popup-draggable').draggable({
        cursor: 'move'
    });
});

Après il suffit de donner la class ‘popup-draggable’ aux popups qu’on veut pouvoir bouger. Sauf que…

Avec ceci où que l’on clique sur la popup, ça déclenche le drag. Hors, pour ma part, dans ces popups il y a des boutons et de plus je destine, à terme, le programme à être utilisé sur smartphone. Donc il faut bien différencier le click pour activer un bouton, du click pour entamer un drag. Autant sur un ordinateur, le clic de la souris est assez précis, autant avec le touch d’un gros pouce tremblant/glissant comme le mien c’est de suite moins évident de faire la différence. Et à partir du moment où le touch bouge ne serait-ce qu’un peu on est en drag et on n’arrive donc pas à activer le bouton.

J’ai pu remarquer ce problème sur Chrome Android et le navigateur Android natif. Firefox Android de son coté réagissait bien. Coté ITruc, je ne sais pas.

Toujours est il que je me suis dis qu’il n’y avait pas besoin de rendre la popup déplaçable où que ce soit qu’on interagit aec elle. Le Header semblait plus indiqué comme zone dédiée à ceci. Toutefois, il ne faut pas bouger que le Header mais bien l’intégralité de la popup. Pour cela je garde le $(‘.popup-draggable’).draggable mais ne l’appelle que lorsque le bouton de la souris est enfoncé sur le Header. Et pour supprimer le drag, je le fais sur le mouseup, c’est à dire quand le bouton de la souris est relaché.

$(function () {
    //Quand on clique sur le header d'un popup
    $('div[data-role="header"]', '.popup-draggable').on("mousedown", function(){
        //Rendre les popups draggables
        $('.popup-draggable').draggable({
            cursor: 'move'
        });
    });
    //Quand on lâche le clic
    $('div[data-role="header"]', '.popup-draggable').on("mouseup", function(){
        //Retire le draggable
        $('.popup-draggable').draggable("destroy");
        //remettre le curseur par défaut
        $('body').removeAttr('style');
    });
});

Oui, mais pour le Touch sur smartphone ? Et bien en fait, j’utilise la bibliothèque jquery.ui.touch-punch qui ‘traduit’ les touch en mouse.

Bon après… Avant d’avoir une version correcte sur smartphone, il faut que je revois toutes les mises en pages… Il y a encore du travail sur Colony9.

Ajout :

J’ai remarqué que des fois, au mouseup il y avait une erreur : Error: cannot call methods on draggable prior to initialization; attempted to call method ‘destroy’

C’est pourquoi j’ai rajouté un rappel de draggable() avant d’appeler le draggable(« destroy »). J’avais déjà croisé un cas similaire sur les fermetures de popup.

$(function () {
    //Quand on clique sur le header d'un popup
    $('div[data-role="header"]', '.popup-draggable').on("mousedown", function(){
        //Rendre les popups draggables
        $('.popup-draggable').draggable({
            cursor: 'move'
        });
    });
    //Quand on lâche le clic
    $('div[data-role="header"]', '.popup-draggable').on("mouseup", function(){
        //Retire le draggable
        $('.popup-draggable').draggable().draggable("destroy");
        //remettre le curseur par défaut
        $('body').removeAttr('style');
    });
});

Billets similaires

Alone Z HTML Petit slideshow en jquery Konami Code en javascript