{"id":1236,"date":"2014-04-03T10:59:32","date_gmt":"2014-04-03T09:59:32","guid":{"rendered":"http:\/\/cyol.fr\/blog\/?p=1236"},"modified":"2014-10-24T15:38:31","modified_gmt":"2014-10-24T13:38:31","slug":"faire-une-popup-draggable-avec-jquery-mobile","status":"publish","type":"post","link":"https:\/\/cyol.fr\/blog\/post\/faire-une-popup-draggable-avec-jquery-mobile\/","title":{"rendered":"Faire une popup draggable avec JQuery Mobile"},"content":{"rendered":"

\"LogoPour Colony9<\/a>, tout comme pour RollAndCrawl<\/a>, j’ai pr\u00e9vu dans mon interface des popups pour signaler des informations ou pour proposer des choix. Toutefois, notamment pour celles proposant des choix, la possibilit\u00e9s de consulter les informations du \u00ab\u00a0plateaux de jeu\u00a0\u00bb en arri\u00e8re plan de la popup reste importante pour le joueur. Du genre \u00ab\u00a0Est ce que je vais prendre des ressources Technologiques ou plut\u00f4t Biologique pour mon gain du tour ?\u00a0\u00bb<\/em>. Histoire de laisser une vision globale du plateau de jeu \u00e0 l’arri\u00e8re plan, j’ai voulu que mes popups soient d\u00e9pla\u00e7ables dans la page.
\n
\nRendre une popup draggable est relativement simple :
\nHTML :<\/p>\n

<div data-role=\"popup\" id=\"popupText\" data-position-to=\"window\" class=\"popup-draggable\">\r\n    <div data-role=\"header\">\r\n        <h2 id=\"popupTextTitre\"><\/h2>\r\n    <\/div>\r\n    <div class=\"ui-content\" data-role=\"content\">\r\n        <div id=\"popupTextContent\">\r\n        <\/div>\r\n        <a href=\"#\" id=\"popupTextClose\" data-role=\"button\" data-rel=\"back\" data-inline=\"true\">\r\n            Continue\r\n        <\/a>\r\n    <\/div>\r\n<\/div><\/pre>\n
JavaScript :<\/p>\n
$(function () {\r\n    $('.popup-draggable').draggable({\r\n        cursor: 'move'\r\n    });\r\n});<\/pre>\n
Apr\u00e8s il suffit de donner la class ‘popup-draggable’ aux popups qu’on veut pouvoir bouger. Sauf que…<\/p>\n
Avec ceci o\u00f9 que l’on clique sur la popup, \u00e7a d\u00e9clenche le drag. Hors, pour ma part, dans ces popups il y a des boutons et de plus je destine, \u00e0 terme, le programme \u00e0 \u00eatre utilis\u00e9 sur smartphone. Donc il faut bien diff\u00e9rencier le click pour activer un bouton, du click pour entamer un drag. Autant sur un ordinateur, le clic de la souris est assez pr\u00e9cis, autant avec le touch d’un gros pouce tremblant\/glissant comme le mien c’est de suite moins \u00e9vident de faire la diff\u00e9rence. Et \u00e0 partir du moment o\u00f9 le touch bouge ne serait-ce qu’un peu on est en drag et on n’arrive donc pas \u00e0 activer le bouton.<\/p>\n
J’ai pu remarquer ce probl\u00e8me sur Chrome Android et le navigateur Android natif. Firefox Android de son cot\u00e9 r\u00e9agissait bien. Cot\u00e9 ITruc, je ne sais pas.<\/p>\n
Toujours est il que je me suis dis qu’il n’y avait pas besoin de rendre la popup d\u00e9pla\u00e7able o\u00f9 que ce soit qu’on interagit aec elle. Le Header semblait plus indiqu\u00e9 comme zone d\u00e9di\u00e9e \u00e0 ceci. Toutefois, il ne faut pas bouger que le Header mais bien l’int\u00e9gralit\u00e9 de la popup. Pour cela je garde le $(‘.popup-draggable’).draggable mais ne l’appelle que lorsque le bouton de la souris est enfonc\u00e9 sur le Header. Et pour supprimer le drag, je le fais sur le mouseup, c’est \u00e0 dire quand le bouton de la souris est relach\u00e9.<\/p>\n
$(function () {\r\n    \/\/Quand on clique sur le header d'un popup\r\n    $('div[data-role=\"header\"]', '.popup-draggable').on(\"mousedown\", function(){\r\n        \/\/Rendre les popups draggables\r\n        $('.popup-draggable').draggable({\r\n            cursor: 'move'\r\n        });\r\n    });\r\n    \/\/Quand on l\u00e2che le clic\r\n    $('div[data-role=\"header\"]', '.popup-draggable').on(\"mouseup\", function(){\r\n        \/\/Retire le draggable\r\n        $('.popup-draggable').draggable(\"destroy\");\r\n        \/\/remettre le curseur par d\u00e9faut\r\n        $('body').removeAttr('style');\r\n    });\r\n});<\/pre>\n
Oui, mais pour le Touch sur smartphone ? Et bien en fait, j’utilise la biblioth\u00e8que jquery.ui.touch-punch qui ‘traduit’ les touch en mouse.<\/p>\n
Bon apr\u00e8s… 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.<\/p>\n
Ajout :<\/strong><\/p>\n
J’ai remarqu\u00e9 que des fois, au mouseup il y avait une erreur : Error: cannot call methods on draggable prior to initialization; attempted to call method ‘destroy’<\/span><\/p>\n
C’est pourquoi j’ai rajout\u00e9 un rappel de draggable() avant d’appeler le draggable(\u00ab\u00a0destroy\u00a0\u00bb). J’avais d\u00e9j\u00e0 crois\u00e9 un cas similaire sur les fermetures de popup.<\/p>\n
$(function () {\r\n    \/\/Quand on clique sur le header d'un popup\r\n    $('div[data-role=\"header\"]', '.popup-draggable').on(\"mousedown\", function(){\r\n        \/\/Rendre les popups draggables\r\n        $('.popup-draggable').draggable({\r\n            cursor: 'move'\r\n        });\r\n    });\r\n    \/\/Quand on l\u00e2che le clic\r\n    $('div[data-role=\"header\"]', '.popup-draggable').on(\"mouseup\", function(){\r\n        \/\/Retire le draggable\r\n        $('.popup-draggable').draggable().draggable(\"destroy\");\r\n        \/\/remettre le curseur par d\u00e9faut\r\n        $('body').removeAttr('style');\r\n    });\r\n});<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Pour Colony9, tout comme pour RollAndCrawl, j’ai pr\u00e9vu dans mon interface des popups pour signaler des informations ou pour proposer des choix. Toutefois, notamment pour celles proposant des choix, la possibilit\u00e9s de consulter les informations du \u00ab\u00a0plateaux de jeu\u00a0\u00bb en arri\u00e8re plan de la popup reste importante pour le joueur. […]<\/p>\n","protected":false},"author":1,"featured_media":1128,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[89,2,45,3,86,87,88,90],"tags":[114,116,23],"class_list":["post-1236","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-colony9-html","category-developpement","category-javascript","category-jeu-de-societe","category-pnp","category-realisations","category-rollandcrawl","category-web","tag-android","tag-javascript","tag-jeu","odd"],"_links":{"self":[{"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/posts\/1236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/comments?post=1236"}],"version-history":[{"count":8,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/posts\/1236\/revisions"}],"predecessor-version":[{"id":1439,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/posts\/1236\/revisions\/1439"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/media\/1128"}],"wp:attachment":[{"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/media?parent=1236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/categories?post=1236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/tags?post=1236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}