{"id":6276,"date":"2014-04-12T10:50:41","date_gmt":"2014-04-12T10:50:41","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=6276"},"modified":"2019-03-20T11:14:36","modified_gmt":"2019-03-20T11:14:36","slug":"ordenar-elementos-con-jquery-sortable-ajax","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/ordenar-elementos-con-jquery-sortable-ajax\/","title":{"rendered":"Ordenar elementos con jQuery Sortable + Ajax"},"content":{"rendered":"

En mi proyecto de final de carrera har\u00e1 unos cuantos a\u00f1os ya llegu\u00e9 a implementar la funci\u00f3n sortable() que nos facilita la interfaz jQuery UI para ordenar un portal de noticias quedando registrado de cara al usuario en linea pero no tuve la posibilidad de explicar como llegu\u00e9 a su implementaci\u00f3n.<\/p>\n

Recientemente para otro proyecto actual me he visto en la necesidad de buscar un sistema sencillo, eficaz y moderno que ordene elementos. En este caso, el usuario final tan solo tiene que pulsar en los elementos y arrastrarlos hasta el sitio deseado.<\/p>\n

En el ejemplo que vamos a ilustrar vamos a tener un listado de ciudades que el usuario va a poder ordenar a su antojo arrastrando los elementos al lugar deseado.<\/p>\n

Vamos a utilizar las tecnolog\u00edas jQuery UI + Ajax. De jQuery UI vamos a utilizar la funci\u00f3n sortable() que nos facilita mucho el trabajo del movimiento de elementos. Y con Ajax vamos a actualizar registros.<\/p>\n

Lo primero que tendremos que hacer es a\u00f1adir en nuestra cabecera todas las librer\u00edas y estilos que necesitemos:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<link<\/span><\/a> href<\/span>=<\/span>"css\/smoothness\/jquery-ui-1.10.4.custom.css"<\/span> rel<\/span>=<\/span>"stylesheet"<\/span>><\/span>\n<script<\/span><\/a> src<\/span>=<\/span>"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.10.2\/jquery.min.js"<\/span>><\/<\/span>script<\/span><\/a>><\/span>\n<script<\/span><\/a> src<\/span>=<\/span>"http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.10.2\/jquery-ui.js"<\/span>><\/<\/span>script<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Seguidamente all\u00ed donde queramos deberemos a\u00f1adir los tags HTML + el listado din\u00e1mico de elementos (ciudades) sacados de la base de datos.<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<ul id="cities" class="sortable">\n\u00a0\u00a0\u00a0 <?php<\/span>\n\u00a0\u00a0\u00a0 $query_cities<\/span> =<\/span> $conexion<\/span>-><\/span>query<\/span>(<\/span>'SELECT * FROM cities ORDER BY position'<\/span>)<\/span>;<\/span>\n\u00a0\u00a0\u00a0 if<\/span> (<\/span>$query_cities<\/span>-><\/span>num_rows<\/span> ><\/span> 0)<\/span> {<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 while<\/span> (<\/span>$row<\/span> =<\/span> $query_cities<\/span>-><\/span>fetch_assoc<\/span>(<\/span>)<\/span>)<\/span> {<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 echo<\/span> '<li class="ui-state-default" id="city_'<\/span>.<\/span>$row<\/span>[<\/span>'id_city'<\/span>]<\/span>.<\/span>'">'<\/span>.<\/span>$row<\/span>[<\/span>'city_name'<\/span>]<\/span>.<\/span>'<\/li>'<\/span>;<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }<\/span>\n\u00a0\u00a0\u00a0 }<\/span>\n\u00a0\u00a0\u00a0 ?><\/span>\n<\/ul><\/pre><\/div><\/div>\n
Para entender el funcionamiento es muy importante que te quedes con los identificadores de los contenedores y listas.<\/p>\n
Ahora solo queda a\u00f1adir el c\u00f3digo clave del asunto. Lo podemos a\u00f1adir o en la cabecera o al final de la p\u00e1gina, por encima de la etiqueta de cierre del <\/body>.<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<<\/span>script type=<\/span>"text\/javascript"<\/span>><\/span>\n$(<\/span>document)<\/span>.ready<\/span>(<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n    $(<\/span>'#cities'<\/span>)<\/span>.sortable<\/span>(<\/span>{<\/span>\n        revert:<\/span> true<\/span>,<\/span>\n        opacity:<\/span> 0.6<\/span>,<\/span> \n        cursor:<\/span> 'move'<\/span>,<\/span>\n        update:<\/span> function<\/span>(<\/span>)<\/span> {<\/span>\n            var<\/span> order =<\/span> $(<\/span>'#cities'<\/span>)<\/span>.sortable<\/span>(<\/span>"serialize"<\/span>)<\/span>+<\/span>'&action=orderState'<\/span>;<\/span>\n            $.post<\/span>(<\/span>"ajax.php"<\/span>,<\/span> order,<\/span> function<\/span>(<\/span>theResponse)<\/span>{<\/span>\n                $(<\/span>'#success'<\/span>)<\/span>.html<\/span>(<\/span>'Gracias por ordenar las ciudades!'<\/span>)<\/span>.slideDown<\/span>(<\/span>'slow'<\/span>)<\/span>.delay<\/span>(<\/span>1000<\/span>)<\/span>.slideUp<\/span>(<\/span>'slow'<\/span>)<\/span>;<\/span>\n            }<\/span>)<\/span>;<\/span>\n        }<\/span>\n    }<\/span>)<\/span>;<\/span>\n}<\/span>)<\/span>;<\/span>\n<\/<\/span>script><\/span><\/pre><\/div><\/div>\n
Simplemente estamos llamando a la funci\u00f3n sortable() que nos facilita la interfaz jQuery UI con algunos par\u00e1metros de los cuales vamos a destacar el par\u00e1metro update donde estamos ejecutando una funci\u00f3n que captura todos los elementos (li) de la lista de ciudades y seguidamente hacemos una llamada AJAX por POST al archivo ajax.php y como resultado mostramos un mensaje instantaneo de respuesta.<\/p>\n
El archivo ajax.php se encarga de actualizar los registros de posici\u00f3n de cada ciudad en la base de datos.<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<?php<\/span>\ninclude<\/span>(<\/span>'..\/..\/config_mysqli.php'<\/span>)<\/span>;<\/span>\n \nforeach<\/span>(<\/span>$_POST<\/span>[<\/span>'city'<\/span>]<\/span> as<\/span> $key<\/span>=><\/span>$value<\/span>)<\/span> {<\/span>\n    $update<\/span> =<\/span> 'UPDATE cities SET position = '<\/span>.<\/span>$key<\/span>.<\/span>' WHERE id_city ='<\/span>.<\/span>$value<\/span>;<\/span>\n    $conexion<\/span>-><\/span>query<\/span>(<\/span>$update<\/span>)<\/span>;<\/span>        \n}<\/span>   \n?><\/span><\/pre><\/div><\/div>\n
Ver ejemplo en funcionamiento<\/a><\/p>\n
Ver m\u00e1s sobre la funci\u00f3n sortable()<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
En mi proyecto de final de carrera har\u00e1 unos cuantos a\u00f1os ya llegu\u00e9 a implementar la funci\u00f3n sortable() que nos facilita la interfaz jQuery UI para ordenar un portal de noticias quedando registrado de cara al usuario en linea pero no tuve la posibilidad de explicar como llegu\u00e9 a su implementaci\u00f3n. Recientemente para otro proyecto […]<\/p>\n","protected":false},"author":1,"featured_media":5096,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31,5,3],"tags":[167],"class_list":["post-6276","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ajax","category-jquery","category-php","tag-eventos"],"yoast_head":"\nOrdenar elementos con jQuery Sortable + Ajax - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ordenar elementos con jQuery Sortable + Ajax - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"En mi proyecto de final de carrera har\u00e1 unos cuantos a\u00f1os ya llegu\u00e9 a implementar la funci\u00f3n sortable() que nos facilita la interfaz jQuery UI para ordenar un portal de noticias quedando registrado de cara al usuario en linea pero no tuve la posibilidad de explicar como llegu\u00e9 a su implementaci\u00f3n. Recientemente para otro proyecto […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/ordenar-elementos-con-jquery-sortable-ajax\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2014-04-12T10:50:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-03-20T11:14:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jqueryui21.png\" \/>\n\t<meta property=\"og:image:width\" content=\"200\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/ordenar-elementos-con-jquery-sortable-ajax\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/ordenar-elementos-con-jquery-sortable-ajax\/\",\"name\":\"Ordenar elementos con jQuery Sortable + Ajax - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/ordenar-elementos-con-jquery-sortable-ajax\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/ordenar-elementos-con-jquery-sortable-ajax\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jqueryui21.png\",\"datePublished\":\"2014-04-12T10:50:41+00:00\",\"dateModified\":\"2019-03-20T11:14:36+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/ordenar-elementos-con-jquery-sortable-ajax\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/ordenar-elementos-con-jquery-sortable-ajax\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/ordenar-elementos-con-jquery-sortable-ajax\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jqueryui21.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jqueryui21.png\",\"width\":200,\"height\":200},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/ordenar-elementos-con-jquery-sortable-ajax\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ordenar elementos con jQuery Sortable + Ajax\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ordenar elementos con jQuery Sortable + Ajax - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Ordenar elementos con jQuery Sortable + Ajax - Jose Aguilar Blog","og_description":"En mi proyecto de final de carrera har\u00e1 unos cuantos a\u00f1os ya llegu\u00e9 a implementar la funci\u00f3n sortable() que nos facilita la interfaz jQuery UI para ordenar un portal de noticias quedando registrado de cara al usuario en linea pero no tuve la posibilidad de explicar como llegu\u00e9 a su implementaci\u00f3n. Recientemente para otro proyecto […]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/ordenar-elementos-con-jquery-sortable-ajax\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2014-04-12T10:50:41+00:00","article_modified_time":"2019-03-20T11:14:36+00:00","og_image":[{"width":200,"height":200,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jqueryui21.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/ordenar-elementos-con-jquery-sortable-ajax\/","url":"https:\/\/www.jose-aguilar.com\/blog\/ordenar-elementos-con-jquery-sortable-ajax\/","name":"Ordenar elementos con jQuery Sortable + Ajax - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/ordenar-elementos-con-jquery-sortable-ajax\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/ordenar-elementos-con-jquery-sortable-ajax\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jqueryui21.png","datePublished":"2014-04-12T10:50:41+00:00","dateModified":"2019-03-20T11:14:36+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/ordenar-elementos-con-jquery-sortable-ajax\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/ordenar-elementos-con-jquery-sortable-ajax\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/ordenar-elementos-con-jquery-sortable-ajax\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jqueryui21.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jqueryui21.png","width":200,"height":200},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/ordenar-elementos-con-jquery-sortable-ajax\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Ordenar elementos con jQuery Sortable + Ajax"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6276","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=6276"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6276\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/5096"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=6276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=6276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=6276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}