{"id":2102,"date":"2012-01-30T14:35:10","date_gmt":"2012-01-30T13:35:10","guid":{"rendered":"http:\/\/flaven.fr\/?p=2102"},"modified":"2013-09-24T05:51:51","modified_gmt":"2013-09-24T03:51:51","slug":"jquery-javascript-glisser-deposer-glisser-deposer-trier-enregistrer-avec-jquery","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2012\/01\/jquery-javascript-glisser-deposer-glisser-deposer-trier-enregistrer-avec-jquery\/","title":{"rendered":"jQuery, javascript, Glisser-d\u00e9poser – Glisser-d\u00e9poser, Trier, Enregistrer avec jQuery"},"content":{"rendered":"


\n<\/p>\n

On connait tous forc\u00e9ment des expressions anglophones c\u00e9l\u00e8bres en musique notamment Rock and Roll, R’n’B, Twist and Shout… Dans le d\u00e9veloppement avec jQuery, celle qui faut connaitre, comme en Flash, c’est le Drag-and-Drop, un glisser-d\u00e9poser dans la langue de Moli\u00e8re. Rien \u00e0 voir avec une amortie au tennis, je vous rassure tout de suite, on va voir, dans cette article, comment faire un “Glisser-d\u00e9poser” combin\u00e9 avec un tri et un enregistrement de ce r\u00e9sultat, le tout \u00e0 l’aide de jQuery, of course.<\/p>\n

N’oubliez pas d’appeler les librairies jQuery.js<\/code> et jQueryUI.js<\/code><\/b><\/p>\n

\r\n\t<script src=\"jQuery.js\" type=\"text\/javascript\" charset=\"utf-8\"><\/script>\r\n\t<script src=\"jQueryUI.js\" type=\"text\/javascript\" charset=\"utf-8\"><\/script>\r\n<\/pre>\n\t\t\t\t\t
\n\n\t\t\t\t\t        
\n\t\t\t\t\t                \"Beginning<\/a>\n\t\t\t\t\t            <\/div>\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
Beginning Javascript and CSS Development With jQuery<\/a><\/h2>\n\t\t\t\t\t\t\t\n\t\t\t\t\t        
Un aper\u00e7u tr\u00e8s complet des potentialit\u00e9s de jQuery en combinaison avec de la CSS pour cr\u00e9er des interfaces riches et interactives multi-plateformes.<\/p>\n\t\t\t\t\t\t\t\tGenre(s) : Agile<\/a>, Ajax<\/a>, API<\/a>, IHM<\/a>, jQuery<\/a>, jQuery UI<\/a>, Mobile<\/a>, UX<\/a>, Webdesign<\/a>
Auteur(s) : Richard York<\/a>
Edition(s) : John Wiley & Sons Ltd<\/a>
\n\t\t\t\t\t
<\/i>+ d'infos<\/span><\/a><\/div>\n\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\n
S’\u00e9chauffer avec sortable()<\/code><\/h4>\n
Pour s’\u00e9chauffer, on va d’abord voir tout simplement comment utiliser une fonction de tri nomm\u00e9e sortable()<\/code>. Il faut pour cela bien sur charger la biblioth\u00e8que javascript jQuery UI<\/code><\/p>\n
A noter, le container est, bien s\u00fbr, l’\u00e9l\u00e9ment <ul>...<\/ul><\/code>, et les enfants sont les \u00e9l\u00e9ments sujet au tri <li>...<\/li><\/code> contenue dans cet \u00e9l\u00e9ment parent.<\/b><\/p>\n
\t\"jQuery,<\/p>\n
Le code du fichier candidats_drag_and_drop_1.html<\/code><\/b><\/p>\n
\r\n\t<script src=\"jQuery.js\" type=\"text\/javascript\" charset=\"utf-8\"><\/script>\r\n\t<script src=\"jQueryUI.js\" type=\"text\/javascript\" charset=\"utf-8\"><\/script>\r\n\t<script type='text\/javascript'>\r\n\r\n\t\t$(document).ready(\r\n\t\t  function() {\r\n\t\t    $('ul').sortable();\r\n\t\t  }\r\n\t\t);\r\n\r\n\t<\/script>\r\n\t<style>\r\n\tbody {\r\n\t    font: 16px sans-serif;\r\n\t    background: #fff;\r\n\t    color: rgb(50, 50, 50);\r\n\t    margin: 0;\r\n\t    padding: 0;\r\n\t}\r\n\th4 {\r\n\t    margin: 5px;    \r\n\t}\r\n\tul {\r\n\t    list-style: none;\r\n\t    width: 250px;\r\n\t    margin: 5px;\r\n\t    padding: 0;\r\n\r\n\t}\r\n\tli {\r\n\t    background: #F6177B;\r\n\t    padding: 3px;\r\n\t    width: 250px;\r\n\t    border: 1px solid #666666;\r\n\t\tcolor:#fff;\r\n\t}\r\n\t<\/style>\r\n\t<\/head>\r\n\t<body>\r\n\r\n\r\n\r\n\r\n\t\t<h4>Quelques candidats à la présidentielle 2012 en France<\/h4>\r\n\t    <ul>\r\n\t\t\t<li>Jean-Pierre CHEVENEMENT<\/li>\r\n\t\t\t<li>François BAYROU<\/li>\r\n\t\t\t<li>Hervé MORIN<\/li>\r\n\t\t\t<li>Corinne LEPAGE<\/li>\r\n\t\t\t<li>Dominique de VILLEPIN<\/li>\r\n\t\t\t<li>Francois HOLLANDE<\/li>\r\n\t\t\t<li>Nicolas SARKOZY<\/li>\r\n\t\t\t<li>Eva JOLY<\/li>\r\n\t\t\t<li>Jean-Luc MELENCHON<\/li>\r\n\t\t\t<li>Frédéric NIHOUS<\/li>\r\n\t\t\t<li>Marine LE PEN<\/li>\r\n\t\t\t<li>Christine BOUTIN<\/li>\r\n\t\t\t<li>Nicolas DUPONT-AIGNAN<\/li>\r\n\r\n\t    <\/ul>\r\n\t\r\n<\/pre>\n
Le glisser-d\u00e9poser sur 2 colonnes<\/h4>\n
On est toujours avec nos candidats \u00e0 la pr\u00e9sidentielle 2012, on veut classer ces candidats dans l’ordre d’arriver comme au tierc\u00e9 !
\nPour se faire la meilleure approche est de cr\u00e9er une variable globale type var $selectedNameCandidat;<\/code>, ainsi \u00e0 chaque fois qu’une s\u00e9lection est faite, l’\u00e9l\u00e9ment s\u00e9lectionn\u00e9 est stocker dans cette variable. Si vous n’agissez pas de la sorte, cela va ralentir consid\u00e9rablement l’ex\u00e9cution de votre script si votre liste contient de tr\u00e8s nombreux \u00e9l\u00e9ments.<\/p>\n
D\u00e9placement d’une colonne \u00e0 une autre<\/b>
\n\"jQuery,<\/p>\n
\"jQuery,<\/p>\n
\"jQuery,<\/p>\n
Le code du fichier candidats_drag_and_drop_2.html<\/code><\/b><\/p>\n
\r\n\r\n\t<script src=\"jQuery.js\" type=\"text\/javascript\" charset=\"utf-8\"><\/script>\r\n\t<script src=\"jQueryUI.js\" type=\"text\/javascript\" charset=\"utf-8\"><\/script>\r\n\t<script type='text\/javascript'>\r\n\r\n\t$(document).ready(\r\n\t  function() {\r\n\t    var $selectedNameCandidat;\r\n\r\n\t    $('li.CandidatName').mousedown(\r\n\t      function() {\r\n\t        if ($selectedNameCandidat && $selectedNameCandidat.length) {\r\n\t          $selectedNameCandidat.removeClass('CandidatNameSelected');\r\n\t        }\r\n\r\n\t        $selectedNameCandidat = $(this);        \r\n\t        $selectedNameCandidat.addClass('CandidatNameSelected');\r\n\t      }\r\n\t    );\r\n\r\n\t    $('ul#column-1').sortable({\r\n\t      connectWith : [\r\n\t        'ul#column-2'\r\n\t      ],\r\n\t      placeholder: 'CandidatNamePlaceholder',\r\n\t      opacity: 0.8,\r\n\t      cursor: 'move'\r\n\t    });\r\n\r\n\t    $('ul#column-2').sortable({\r\n\t      connectWith : [\r\n\t        'ul#column-1'\r\n\t      ],\r\n\t      placeholder: 'CandidatNamePlaceholder',\r\n\t      opacity: 0.8,\r\n\t      cursor: 'move'\r\n\t    });\r\n\t  }\r\n\t);\r\n\r\n\t<\/script>\r\n\t<style>\r\n\thtml,\r\n\tbody {\r\n\t    width: 100%;\r\n\t    height: 100%;    \r\n\t}\r\n\tbody {\r\n\t    font: normal 12px \"Lucida Grande\", Arial, sans-serif;\r\n\t    color: rgb(50, 50, 50);\r\n\t    margin: 0;\r\n\t    padding: 0;\r\n\t\tbackground: #ccc;\r\n\t}\r\n\tdiv#hcontainer {\r\n\t    position: absolute;\r\n\t    top: 0;\r\n\t    right: 0;\r\n\t    bottom: 23px;\r\n\t    left: 0;\r\n\t}\r\n\tul#column-1,\r\n\tul#column-2 {\r\n\t    float: left;\r\n\t    height: 800px;\r\n\t    width: 300px;\r\n\t    border-bottom: 1px solid #666666;\r\n\t    border-right: 1px solid #666666;\r\n\t    background: #fff;\r\n\t    list-style: none;\r\n\t    margin: 0;\r\n\t    padding: 0;\r\n\t}\r\n\r\n\r\n\tli.CandidatName {\r\n\t    clear: both;\r\n\t    padding: 5px 5px 10px 5px;\r\n\t    min-height: 48px;\r\n\t    width: 290px;\r\n\t}\r\n\tli.CandidatName h5 {\r\n\t    font: normal 12px \"Lucida Grande\", Arial, sans-serif;\r\n\t    margin: 0;\r\n\t}\r\n\th5.CandidatName {\r\n\t    padding-left: 55px;\r\n\t}\r\n\tli.CandidatNameSelected {\r\n\t    background: #F6177B;\r\n\t    color: white;\r\n\t}\r\n\t.CandidatNamePlaceholder {\r\n\t    background: #999;\r\n\t    height: 58px;\r\n\t}\r\n\r\n\t<\/style>\r\n\t<\/head>\r\n\t<body>\r\n\r\n\r\n\r\n\t\t<div id=\"hcontainer\">\r\n\t\t<table border=\"0\">\r\n\t\t\r\n\t\t\t<tr>\r\n\t\t\t\t<th><h1>Candidats<\/h1><\/th>\r\n\t\t\t\t<th><h1>R\u00e9sultats<\/h1><\/th>\r\n\t\t\t<\/tr>\r\n\r\n\r\n\t\t\t\t<tr>\r\n\t\t\t\t\t<td valign=\"top\">\r\n\t\t\t\t\t\t  <ul id=\"column-1\">\r\n\t\t\t\t\t\t    <li class=\"CandidatName\"><h5>Francois HOLLANDE<\/h5><\/li>\r\n\t\t\t\t\t\t    <li class=\"CandidatName\"><h5>Nicolas SARKOZY<\/h5><\/li>\r\n\t\t\t\t\t\t    <li class=\"CandidatName\"><h5>Jean-Pierre CHEVENEMENT<\/h5><\/li>\r\n\t\t\t\t\t\t    <li class=\"CandidatName\"><h5>François BAYROU<\/h5><\/li>\r\n\t\t\t\t\t\t    <li class=\"CandidatName\"><h5>Hervé MORIN<\/h5><\/li>\r\n\t\t\t\t\t\t\t<li class=\"CandidatName\"><h5>Corinne LEPAGE<\/h5><\/li>\r\n\t\t\t\t\t\t\t<li class=\"CandidatName\"><h5>Dominique de VILLEPIN<\/h5><\/li>\r\n\t\t\t\t\t\t\t<li class=\"CandidatName\"><h5>Eva JOLY<\/h5><\/li>\r\n\t\t\t\t\t\t\t<li class=\"CandidatName\"><h5>Jean-Luc MELENCHON<\/h5><\/li>\r\n\t\t\t\t\t\t\t<li class=\"CandidatName\"><h5>Frédéric NIHOUS<\/h5><\/li>\r\n\t\t\t\t\t\t\t<li class=\"CandidatName\"><h5>Marine LE PEN<\/h5><\/li>\r\n\t\t\t\t\t\t\t<li class=\"CandidatName\"><h5>Christine BOUTIN<\/h5><\/li>\r\n\t\t\t\t\t\t\t<li class=\"CandidatName\"><h5>Nicolas DUPONT-AIGNAN<\/h5><\/li>\r\n\t\t\t\t\t\t<\/ul>\r\n\t\t\t\t<\/td>\r\n\r\n\t\t\t\t\t<td>\r\n\t\t\t\t  \t\t<ul id=\"column-2\">\r\n\t\t\t\t  \t\t<\/ul>\r\n\t\t\t\t\t<\/td>\t\r\n\t\t\t\t<\/tr>\r\n\t\t<\/table>\r\n\t\t<\/div>\r\n\r\n\r\n\t<\/body>\r\n\t<\/html>\r\n\t\r\n\t\r\n<\/pre>\n
Enregistrement de l’\u00e9tat des listes tri\u00e9es<\/h4>\n
L’\u00e9tape ultime est d’utiliser JQuery pour s\u00e9rialiser nos valeurs ordonnanc\u00e9es et  les envoyer dans une boite d’alerte. En lieu et place de la boite d’alerte, cela pourrait \u00eatre un script php qui permettrait l’insertion dans une base de donn\u00e9es.
\nCeux sont les attributs title<\/code> de nos <li> qui vont \u00eatre pass\u00e9s dans une chaine nomm\u00e9e OrderCandidates[]<\/code>.<\/p>\n
\"jQuery,<\/p>\n
\"jQuery,<\/p>\n
\r\n\t<script src=\"jQuery.js\" type=\"text\/javascript\" charset=\"utf-8\"><\/script>\r\n\t<script src=\"jQueryUI.js\" type=\"text\/javascript\" charset=\"utf-8\"><\/script>\r\n\t<script type='text\/javascript'>\r\n\r\n\t$(document).ready(\r\n\t  function() {\t  \r\n\t    var $selectedFile;\r\n\r\n\t    $('li.CandidatName').mousedown(\r\n\t      function() {\r\n\t        if ($selectedNameCandidat && $selectedNameCandidat.length) {\r\n\t          $selectedNameCandidat.removeClass('CandidatNameSelected');\r\n\t        }\r\n\r\n\t        $selectedNameCandidat = $(this);        \r\n\t        $selectedNameCandidat.addClass('CandidatNameSelected');\r\n\t      }\r\n\t    );\r\n\r\n\t    var saveUpdate = function(e, ui) {\r\n\t      var $data = $(this).sortable(\r\n\t        'serialize', {\r\n\t          attribute: 'title',\r\n\t          expression: \/^(.*)$\/,\r\n\t          key: 'OrderCandidates[]'\r\n\t        }\r\n\t      );\r\n\r\n\t      alert($data);\r\n\r\n\t    \/\/ Ici vous pouvez placer une requete ajax vers\r\n\t\t\/\/ un script sur votre serveur\r\n\t      \/\/ $.get('\/chemin\/vers\/le_serveur\/fichier.php', $data);\r\n\t    };\r\n\r\n\t    $('ul#column-1').sortable({\r\n\t      connectWith : [\r\n\t        'ul#column-2'\r\n\t      ],\r\n\t      placeholder: 'CandidatNamePlaceholder',\r\n\t      opacity: 0.8,\r\n\t      cursor: 'move',\r\n\t      update: saveUpdate\r\n\t    });\r\n\r\n\t    $('ul#column-2').sortable({\r\n\t      connectWith : [\r\n\t        'ul#column-1'\r\n\t      ],\r\n\t      placeholder: 'CandidatNamePlaceholder',\r\n\t      opacity: 0.8,\r\n\t      cursor: 'move',\r\n\t      update: saveUpdate\r\n\t    });\r\n\t  }\r\n\t);\r\n\r\n\t<\/script>\r\n\t<style>\r\n\r\n\thtml,\r\n\tbody {\r\n\t    width: 100%;\r\n\t    height: 100%;    \r\n\t}\r\n\tbody {\r\n\t    font: normal 12px \"Lucida Grande\", Arial, sans-serif;\r\n\t    color: rgb(50, 50, 50);\r\n\t    margin: 0;\r\n\t    padding: 0;\r\n\t\tbackground: #ccc;\r\n\t}\r\n\tdiv#hcontainer {\r\n\t    position: absolute;\r\n\t    top: 0;\r\n\t    right: 0;\r\n\t    bottom: 23px;\r\n\t    left: 0;\r\n\t}\r\n\tul#column-1,\r\n\tul#column-2 {\r\n\t    float: left;\r\n\t    height: 800px;\r\n\t    width: 300px;\r\n\t    border-bottom: 1px solid #666666;\r\n\t    border-right: 1px solid #666666;\r\n\t    background: #fff;\r\n\t    list-style: none;\r\n\t    margin: 0;\r\n\t    padding: 0;\r\n\t}\r\n\r\n\r\n\tli.CandidatName {\r\n\t    clear: both;\r\n\t    padding: 5px 5px 10px 5px;\r\n\t    min-height: 48px;\r\n\t    width: 290px;\r\n\t}\r\n\tli.CandidatName h5 {\r\n\t    font: normal 12px \"Lucida Grande\", Arial, sans-serif;\r\n\t    margin: 0;\r\n\t}\r\n\th5.CandidatName {\r\n\t    padding-left: 55px;\r\n\t}\r\n\tli.CandidatNameSelected {\r\n\t    \/*background: #F6177B;*\/\r\n\t    color: white;\r\n\t}\r\n\t.CandidatNamePlaceholder {\r\n\t    \/*background: #999;*\/\r\n\t\tbackground: #F6177B;\r\n\t    height: 58px;\r\n\t}\r\n\r\n\t<\/style>\r\n\t<\/head>\r\n\t<body>\r\n\r\n\t\t    <div id=\"hcontainer\">\r\n\t\t\t<table border=\"0\">\r\n\t\t\t\t<tr>\r\n\t\t\t\t\t<th><h1>Candidats<\/h1><\/th>\r\n\t\t\t\t\t<th><h1>Résultats<\/h1><\/th>\r\n\t\t\t\t<\/tr>\r\n\r\n\r\n\t\t\t\t\t<tr>\r\n\t\t\t\t\t\t<td valign=\"top\">\r\n\t\t\t\t\t\t\t  <ul id=\"column-1\">\r\n\t\t\t\t\t\t\t\t<li class=\"CandidatName\" title=\"nicolas_sarkozy\"><h5>Nicolas SARKOZY<\/h5><\/li>\r\n\t\t\t\t\t\t\t    <li class=\"CandidatName\" title=\"jean_pierre_chevenement\"><h5>Jean-Pierre CHEVENEMENT<\/h5><\/li>\r\n\t\t\t\t\t\t\t    <li class=\"CandidatName\" title=\"francois_bayrou\"><h5>François BAYROU<\/h5><\/li>\r\n\t\t\t\t\t\t\t    <li class=\"CandidatName\" title=\"herve_morin\"><h5>Hervé MORIN<\/h5><\/li>\r\n\t\t\t\t\t\t\t\t<li class=\"CandidatName\" title=\"corinne_lepage\"><h5>Corinne LEPAGE<\/h5><\/li>\r\n\t\t\t\t\t\t\t\t<li class=\"CandidatName\" title=\"dominique_de_villepin\"><h5>Dominique de VILLEPIN<\/h5><\/li>\r\n\t\t\t\t\t\t\t\t<li class=\"CandidatName\" title=\"eva_joly\"><h5>Eva JOLY<\/h5><\/li>\r\n\t\t\t\t\t\t\t\t<li class=\"CandidatName\" title=\"jean_luc_melenchon\"><h5>Jean-Luc MELENCHON<\/h5><\/li>\r\n\t\t\t\t\t\t\t    <li class=\"CandidatName\" title=\"francois_hollande\"><h5>Francois HOLLANDE<\/h5><\/li>\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t<li class=\"CandidatName\" title=\"frederic_nihous\"><h5>Frédéric NIHOUS<\/h5><\/li>\r\n\t\t\t\t\t\t\t\t<li class=\"CandidatName\" title=\"marine_le_pen\"><h5>Marine LE PEN<\/h5><\/li>\r\n\t\t\t\t\t\t\t\t<li class=\"CandidatName\" title=\"christine_boutin\"><h5>Christine BOUTIN<\/h5><\/li>\r\n\t\t\t\t\t\t\t\t<li class=\"CandidatName\" title=\"nicolas_dupont_aignan\"><h5>Nicolas DUPONT-AIGNAN<\/h5><\/li>\r\n\t\t\t\t\t\t\t<\/ul>\r\n\t\t\t\t\t<\/td>\r\n\r\n\t\t\t\t\t\t<td>\r\n\t\t\t\t\t  \t\t<ul id=\"column-2\">\r\n\t\t\t\t\t  \t\t<\/ul>\r\n\t\t\t\t\t\t<\/td>\t\r\n\t\t\t\t\t<\/tr>\r\n\t\t\t<\/table>\r\n\t\t\t<\/div>\r\n\t\r\n<\/pre>\n
En savoir plus<\/h2>\n