Hacer drag & drop de ficheros fuera del navegador con Chrome

ByLuis

Hace tiempo comenté cómo hacer drag & drop directamente sobre el navegador, lo cual nos venía muy bien para subir ficheros (por ejemplo para un correo, galería de fotos, …). Esta vez se trata de descargar ficheros directamente desde el navegador, algo que permite GMail desde Chrome.

El autor de este post lo ha tenido difícil para poder ver cómo lo hace Google, pero al final el código es bastante sencillo:

var file = document.getElementById("dragout");
 
file.addEventListener("dragstart",function(evt){
    evt.dataTransfer.setData("DownloadURL",fileDetails);
},false);

Sólo disponible en Chrome

Drag out files like Gmail

Tutorial de Drag&Drop de capas con jQuery UI

ByLuis

Últimamente, algunas webs como la BBC han modificado su diseño para hacerlo modular y permitir que el usuario realice Drag&Drop de los módulos para colocarlos cómo más le guste, algo que Netvibes o iGoogle ya hacían hace bastante tiempo. Afortunadamente, ahora con jQuery UI se puede realizar de forma muy sencilla.

El tutorial que enlazo explica paso a paso cómo hacerlo haciendo uso de jQuery, jQuery UI mediante los sortables y jQuery Cookies para trabajar con cookies de forma facil (y poder recuperar la configuración cuando el usuario vuelva a conectarse).

$('#sidebar .sortable-list').sortable({
    axis: 'y',
    containment: 'parent',
    forceHelperSize: true,
    forcePlaceholderSize: true,
    handle: '.section-title',
    opacity: 0.8,
    placeholder: 'placeholder',
    update: function(){
        $.cookie('sidebar-cookie', getItems('sidebar'));
    }
});

jQuery: Customizable layout using drag and drop

Vía @kingsleyphls

| |

Laboratorio: realizar drag and drop de elementos HTML

ByLuis

Dentro de la Web 2.0 se intentan hacer cosas menos web y más tipo aplicación de escritorio. Una de estas cosas es realizar un drag and drop. Esto nos puede ser útil para interactuar con elementos, por ejemplo, tenemos una lista de productos, pinchamos en uno y arrastramos en otro, obteniendo una comparativa de los productos. Bueno, las aplicaciones que le podemos dar depende de nuestras necesidades y de nuestra imaginación. Eso sí, la forma de realizarlo es la misma.
drag.png
En el ejemplo que hemos creado, hacemos que el elemento seleccionado se posicione encima del elemento sobre el que realizamos el drop. También hay que tener en cuenta, que en este caso, el drag&drop que hacemos es pinchando-moviendo-pinchando, no pinchando-moviendo-soltando. Realmente también se podría hacer así, pero como lo hemos hecho válido para texto, si lo hacemos de la manera normal, se podría ir seleccionando el texto según se mueve el ratón.

Read More “Laboratorio: realizar drag and drop de elementos HTML”