{"id":5054,"date":"2012-10-26T15:50:50","date_gmt":"2012-10-26T15:50:50","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=5054"},"modified":"2014-11-09T20:41:14","modified_gmt":"2014-11-09T20:41:14","slug":"draggable-sortable-jquery-ui","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/draggable-sortable-jquery-ui\/","title":{"rendered":"Draggable &#038; Sortable con jQuery UI"},"content":{"rendered":"<p>En el proyecto de final de carrera que tuve que realizar hace unos a\u00f1os tuve que dinamizar el contenido de un portal de noticias donde una de las propuestas que realic\u00e9 fue emplear el framework jQuery UI utilizar las funciones draggable y soratable.<\/p>\n<p>Hoy he querido memorar esa programaci\u00f3n que realic\u00e9 en su d\u00eda y la quiero compartir.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/JQuery_UI_logo_color_onwhite-300x72.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5092\" title=\"JQuery_UI_logo_color_onwhite-300x72\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/JQuery_UI_logo_color_onwhite-300x72.png\" alt=\"\" width=\"300\" height=\"72\" \/><\/a><\/p>\n<p>Para a\u00f1adir estos efectos de mover y ordenar elementos en tu p\u00e1gina Web lo vamos a explicar con un ejemplo de noticias en el cual deber\u00e1s incluir en el &lt;head&gt; de tu p\u00e1gina:<\/p>\n<pre>&lt;script type=\"text\/javascript\" src=\"..\/jquery.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"js\/jquery-ui-1.8.22.custom.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n$(function() {\r\n\u00a0\u00a0 \u00a0$('#sortable').sortable();\r\n\u00a0\u00a0\u00a0 $('#sortable').disableSelection();\r\n});\r\n&lt;\/script&gt;<\/pre>\n<p>Como puedes observar necesitaremos la librer\u00eda jQuery, la customizaci\u00f3n del framework jQuery UI y la llamada a las funci\u00f3n sortable() incluida en dicho framework.<\/p>\n<p>Y en el &lt;body&gt; podr\u00edamos tener por ejemplo una lista de elementos:<\/p>\n<pre>&lt;ul id=\"sortable\"&gt;\r\n\u00a0\u00a0\u00a0 &lt;li&gt;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0&lt;h1&gt;Titular de la noticia 1&lt;\/h1&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ..&lt;\/p&gt;\r\n\u00a0\u00a0\u00a0 &lt;\/li&gt;\r\n    ..\r\n&lt;\/ul&gt;<\/pre>\n<p>Y finalmente a\u00f1adimos algo de estilos a estas listas en el &lt;head&gt; o en un archivo css que incluiremos en el &lt;head&gt; de la p\u00e1gina:<\/p>\n<pre>ul#sortable {\r\n\u00a0\u00a0 \u00a0float:left;\r\n\u00a0\u00a0 \u00a0width:100%;\r\n\u00a0\u00a0 \u00a0margin:0px;\r\n\u00a0\u00a0 \u00a0padding:0px;\r\n}\r\n\r\nul#sortable li {\r\n\u00a0\u00a0 \u00a0float:left;\r\n\u00a0\u00a0 \u00a0width:200px;\r\n\u00a0\u00a0 \u00a0margin-right:10px;\r\n\u00a0\u00a0 \u00a0margin-top:10px;\r\n\u00a0\u00a0 \u00a0background-color:#CCCCCC;\r\n\u00a0\u00a0 \u00a0border-radius:4px;\r\n\u00a0\u00a0 \u00a0padding:5px;\r\n\u00a0\u00a0 \u00a0box-shadow: 5px 5px 2px #888;\r\n\u00a0\u00a0 \u00a0cursor:pointer;\r\n\u00a0\u00a0 \u00a0list-style:none;\r\n}<\/pre>\n<p>Para visualizar el resultado lo mejor es que veas el ejemplo en funcionamiento y comiences a mover elementos con posibilidad de guardar ese contenido ordenado seg\u00fan desees.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/draggable-sortable\/\" target=\"_blank\">Ver ejemplo en funcionamiento<\/a><\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/draggable-sortable\/portalet.html\" target=\"_blank\">Ver portalet con estilos del framework jQuery UI<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En el proyecto de final de carrera que tuve que realizar hace unos a\u00f1os tuve que dinamizar el contenido de un portal de noticias donde una de las propuestas que realic\u00e9 fue emplear el framework jQuery UI utilizar las funciones draggable y soratable. Hoy he querido memorar esa programaci\u00f3n que realic\u00e9 en su d\u00eda y [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5093,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[167],"class_list":["post-5054","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-eventos"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Draggable &amp; Sortable con jQuery UI - 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=\"Draggable &amp; Sortable con jQuery UI - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"En el proyecto de final de carrera que tuve que realizar hace unos a\u00f1os tuve que dinamizar el contenido de un portal de noticias donde una de las propuestas que realic\u00e9 fue emplear el framework jQuery UI utilizar las funciones draggable y soratable. Hoy he querido memorar esa programaci\u00f3n que realic\u00e9 en su d\u00eda y [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/draggable-sortable-jquery-ui\/\" \/>\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=\"2012-10-26T15:50:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-11-09T20:41:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jqueryui2.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=\"2 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\/draggable-sortable-jquery-ui\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/draggable-sortable-jquery-ui\/\",\"name\":\"Draggable & Sortable con jQuery UI - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/draggable-sortable-jquery-ui\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/draggable-sortable-jquery-ui\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jqueryui2.png\",\"datePublished\":\"2012-10-26T15:50:50+00:00\",\"dateModified\":\"2014-11-09T20:41:14+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/draggable-sortable-jquery-ui\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/draggable-sortable-jquery-ui\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/draggable-sortable-jquery-ui\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jqueryui2.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jqueryui2.png\",\"width\":200,\"height\":200},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/draggable-sortable-jquery-ui\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Draggable &#038; Sortable con jQuery UI\"}]},{\"@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":"Draggable & Sortable con jQuery UI - 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":"Draggable & Sortable con jQuery UI - Jose Aguilar Blog","og_description":"En el proyecto de final de carrera que tuve que realizar hace unos a\u00f1os tuve que dinamizar el contenido de un portal de noticias donde una de las propuestas que realic\u00e9 fue emplear el framework jQuery UI utilizar las funciones draggable y soratable. Hoy he querido memorar esa programaci\u00f3n que realic\u00e9 en su d\u00eda y [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/draggable-sortable-jquery-ui\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-10-26T15:50:50+00:00","article_modified_time":"2014-11-09T20:41:14+00:00","og_image":[{"width":200,"height":200,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jqueryui2.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":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/draggable-sortable-jquery-ui\/","url":"https:\/\/www.jose-aguilar.com\/blog\/draggable-sortable-jquery-ui\/","name":"Draggable & Sortable con jQuery UI - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/draggable-sortable-jquery-ui\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/draggable-sortable-jquery-ui\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jqueryui2.png","datePublished":"2012-10-26T15:50:50+00:00","dateModified":"2014-11-09T20:41:14+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/draggable-sortable-jquery-ui\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/draggable-sortable-jquery-ui\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/draggable-sortable-jquery-ui\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jqueryui2.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/jqueryui2.png","width":200,"height":200},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/draggable-sortable-jquery-ui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Draggable &#038; Sortable con jQuery UI"}]},{"@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\/5054","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=5054"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/5054\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/5093"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=5054"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=5054"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=5054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}