Drag and Drop + Cookies con jQuery

Arrastrar y soltar (drag and drop) es una manera de personalizar el orden de módulos específicos de una pagina, ordenar una fila de registros entre otras cosas mas. Centrándonos en el concepto de la Web 2.0 esta es una funcionalidad indispensable para brindar personalización a nuestros usuarios.

En este tutorial implementaremos el Drag and drop en un HTML logrando mover modulos y guardándolos en cookies, esto para que el usuario al refrescar la pagina tenga su configuración guardada.

JavaScript

Necesitaremos incluir las librerías de jQuery, jQuery UI y jQuery Cookie en nuestro HTML.
[html]
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
[/html]
En el siguiente script declaramos variables y funciones que servirán para recorrer elementos, ordenarlos, y especificar zonas para el drag and drop.
[javascript]
<script type="text/javascript">
var divid = ‘sidebar’;
var cookiename = ‘sidebar-cookie’;
function getItems(id){
return $(‘#’+id+’-list’).sortable(‘toArray’).join(‘,’);
}
function renderItems(id, itemStr){
var list = $(‘#’ + id + ‘-list’);
var items = itemStr.split(‘,’)
for ( var i in items ){
html = ‘<li class="sortable-item’;
html += ‘" id="’ + items[i] + ‘"><div class="loader"></div></li>’;
list.append(html);
$(‘#’ + items[i]).load(‘content/’ + items[i] + ‘.html’);
}
}
var sidebarSource = ‘search,entries,board,topics’;
if($.cookie(cookiename) != null){
sidebarSource = $.cookie(cookiename);
}
$(document).ready(function(){
renderItems(divid, sidebarSource);
$(‘#’+divid+’ .sortable-list’).sortable({
axis: ‘y’,
containment: ‘parent’,
forceHelperSize: true,
forcePlaceholderSize: true,
handle: ‘.section-title’,
opacity: 0.8,
placeholder: ‘placeholder’,
update: function(){
$.cookie(cookiename, getItems(divid));
}
});
});
</script>
[/javascript]

HTML

El contenedor de los elementos amoxil side effects sera un UL, este deberá tener el identificador y clases que pusimos en el Javascript:
[html]
<div class="right sidebar" id="sidebar">
<ul class="sortable-list" id="sidebar-list"></ul>
</div>
[/html]
Los módulos cargaran mediante Ajax, y el nombre del html sera igual a la variable declarada:
[javascript]
var sidebarSource = ‘search,entries,board,topics’;
[/javascript]
Osea: tendremos HTML´s de forma: search.html, entries.html, board.html, topics.html.
Los módulos deben manejar un estándar para reconocer zonas de donde hacer el drag and drop.
[html]
<div class="section">
<div class="section-title">Search</div>
<div class="section-content">
<form method="post" action="">
<input type="text" class="text" size="28" />  
<input type="submit" class="button" value="Submit" />
</form>
</div>
</div>
[/html]
ver demo – descargar
Vía: DevHeart