| |

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.

El método es sencillo, capturamos el evento onclick y el evento onmouseover del body del documento, para que cuando se pinche con el ratón en un elemento HTML podamos tratarlo, y que una vez pulsado, el moviemiento del ratón sea utilizado para posicionar el efecto drag & drop.

El efecto drag & drop consiste en ver una copia recortada y semitransparente del elemento seleccionado que acompaña al ratón. Para ello, al pinchar en el objeto, lo clonamos (cloneNode()), lo añadimos al documento y lo colocamos según la posición del ratón. Los estilos del elemento harán que aparezca recortado y semitransparente.

Lo primero que hay que hacer es capturar los eventos del body:

<body onclick="drag(event, 0)" onmousemove="drag(event, 1)">

El método que se encarga de tratar el drag&drop realiza las siguientes acciones:

  • Si se pincha sobre un objeto (empieza el drag), se crea una copia del elemento, se mete en un contenedor que tiene los estilos para que parezca recortado y transparente, y lo posicionamos junto al puntero del ratón.
  • Si ha comenzado el drag, al moverse el ratón se moverá el elemento que muestra el efecto D&D.
  • Si se pincha sobre un objeto cuando se estaba realizando el D&D, se elimina el objeto “efecto” y se posiciona el elemento sobre el que se hacía el D&D antes del objeto pinchado (insertBefore(node, node)).
var nuevo = null; // El objeto efecto drag&drop
var obj = null; // El objeto seleccionado
var okDrag = false; // Si se hace drag&drop
// Trata el drag&drop
function drag(evt, estado) {
switch (estado) {
// Inicio o fin de drag&drop
case 0:
// Fin drag
if (okDrag) {
// Eliminamos el elemento que hemos creado para el efecto d&d
nuevo.parentNode.removeChild(nuevo);
// Obtenemos el elemento destino del evento del ratón
var destino = evt.srcElement? evt.srcElement : evt.target;
// Dependiendo de ciertos elementos, obtenemos su padre
// Por ejemplo, una celda no nos vale, nos vale la tabla
if (destino.tagName == "TD") {
destino = destino.parentNode;
}
if (destino.tagName == "TR") {
destino = destino.parentNode;
}
if (destino.tagName == "TBODY") {
destino = destino.parentNode;
}
// Si no se trata del mismo objeto,
// recolocamos el objeto encima del destino
if (destino != obj) {
destino.parentNode.insertBefore(obj, destino);
}
nuevo = null;
okDrag = false;
// Inicio drag
} else {
// Obtenemos el elemento destino del evento del ratón
obj = evt.srcElement? evt.srcElement : evt.target;
// Si no se trata del BODY o del HTML, para evitar problemas...
if (obj.tagName != "BODY" && obj.tagName != "HTML") {
// Dependiendo de ciertos elementos, obtenemos su padre
// Por ejemplo, una celda no nos vale, nos vale la tabla
if (obj.tagName == "TD") {
obj = obj.parentNode;
}
if (obj.tagName == "TR") {
obj = obj.parentNode;
}
if (nuevo != null) {
nuevo.parentNode.removeChild(nuevo);
nuevo = null;
}
// Creamos un contenedor para el elementro efecto D&D
nuevo = document.createElement("DIV");
nuevo.id = "nuevo";
nuevo.className = "nuevo";
// Añadimos el clon
nuevo.appendChild(obj.cloneNode(true));
// Posicionamos
nuevo.style.top = (evt.clientY+5)+"px";
nuevo.style.left = (evt.clientX+5)+"px";
// Lo incluimos en el BODY
document.body.appendChild(nuevo);
okDrag = true;
}
}
break;
case 1: // Movimiento drag
if (okDrag) {
// Posicionamos
nuevo.style.top = (evt.clientY+5)+"px";
nuevo.style.left = (evt.clientX+5)+"px";
}
break;
}
}

Demo

Código

Similar Posts

|

Novedades en Javascript 1.8

ByLuis

Mientras se sigue con el desarrollo de la versión 3 de Firefox, podemos ir viendo que novedades traerá la versión 1.8 de Javascript. Las novedades son muy interesantes, pero creo que necesitarán de un cambio de modo de pensar en Javascript, ya que es algo a lo que no estamos acostumbrados.

Notación Lambda

La notación Lambda nos permite declarar funciones que devuelvan datos sin necesidad de llaves ({..}), ni de devolver directamente el resultado con return.

Por ejemplo, la siguiente función:

function(x) { return x * x; }

pasaría a ser:

function(x) x * x

Generador de expresiones

Existente ya en Phyton, nos permite generar expresiones como arrays o matrices de forma rápida y elegante. Para una explicación con un poco de profundidad, el autor del artículo usa un solucionador de Sudokus para explicarnos paso a paso cómo funcionan. Quizás un ejemplo más sencillo sea el siguiente:

// Crea un array de 100 posiciones rellenas con cero
[ 0 for ( i in 100 ) ]
// Crea una matriz identidad de 10x10
[[ i == j ? 1 : 0 for ( i in 10 ) ] for ( j in 10 )]

También se pueden utilizar para comprimir arrays, por ejemplo quedarnos solo con los valores pares:

[i for (i in lista) if (i % 2 == 0)]

Reducción de arrays

Permite reducir iterativamente un array a un solo valor usando una función llamada de retorno.

La nomenclatura sería de la siguiente forma:

miArray.reduce( fn [, val_inicial] );
// La función sería de la siguiente manera
miArray.reduce(function(ultimo_valor, valor_actual){
return ultimo_valor + valor_actual;
});

Si combinamos los dos puntos anteriores, podemos obtener la suma de los cien primeros números de la siguiente manera:

[x for ( x in 100 )].reduce(function(a,b) a+b);

JavaScript 1.8 Progress

Vía / dzone

Detectar copiar, pegar y cortar en una caja de texto con jQuery

ByLuis

Algo sencillo que no conocía y que nos permite detectar cuando se copia, corta y pega en cajas de texto usando jQuery.

$(document).ready(function() {
$("input:text").bind('copy', function(e) {
alert('Copiando...');
});
$("input:text").bind('paste', function(e) {
alert('Pegando...');
});
$("input:text").bind('cut', function(e) {
alert('Cortando...');
});
});

Detect Copy, Paste and Cut operations on a TextBox using jQuery

Vía / Script & Style

|

Mostrar iconos en los enlaces mediante Javascript

ByLuis

Hoy he visto en varios sitios cómo poner en los enlaces un icono del tipo de archivo al que se hace referencia. Algo parecido contamos hace ya tiempo, y al igual que en el ejemplo actual, no funciona para IE6, y aunque nos pese, aún hay muchas personas que siguen usando este navegador.

Una solución es realizarlo mediante Javascript, para lo cual tan solo deberemos incluir un pequeño script en nuestras páginas. El script tiene un array con expresiones regulares que detectan determinadas href y la url del icono para incluirlo en el estilo del enlace. Además existe una función que añade al evento onload del window una función que selecciona todos los enlaces, comprueba por cada enlace si cumple alguna de las expresiones regulares y si es así modifica el estilo con el icono correspondiente.

var listaiconos = new Array();
listaiconos[listaiconos.length] = new Array(/youtube\.com\/watch\?/, "icons/icon_film.gif");
listaiconos[listaiconos.length] = new Array(/sevenload\.com\/videos\//, "icons/icon_film.gif");
...
window.onload = function() {
var enlaces = document.getElementsByTagName("A");
for (var i=0; i<enlaces.length; i++) {
var ok = false;
for (var j=0; j<listaiconos.length && !ok; j++) {
if (enlaces[i].href.match(listaiconos[j][0])) {
enlaces[i].style.paddingRight = "20px";
enlaces[i].style.backgroundImage = "url("+listaiconos[j][1]+")";
enlaces[i].style.backgroundColor = "transparent";
enlaces[i].style.backgroundRepeat = "no-repeat";
enlaces[i].style.backgroundPosition = "right center";
ok = true;
}
}
}
}

Código

Vía / Intenta

Testear páginas web con AVA y PhantomJS

ByLuis

Estoy colaborando junto a @jlantunez y @belelros en WebSlides, un proyecto open source que permite crear presentaciones usando un navegador web de forma increíble.

Para hacer las cosas bien, vamos a incluir pruebas de testing, y para ello he mirado cómo hacerlo con AVA y PhantomJS. El problema con el que me he encontrado ha sido que todo es asíncrono y a veces da un poco de problemas esperar a cargar la página para que AVA empiece a realizar las pruebas.

Además no es plan de cargar la página en cada una de las pruebas, por lo que cargo la página una vez y luego realizo las pruebas necesarias. Esto me obliga a que las pruebas sean secuenciales en vez de en paralelo, pero bueno, tampoco es mucho problema.

Como me he roto la cabeza intentado averiguar cómo hacer, ya que soy un tanto novato en esto, pongo el código para aquel que lo necesite, aunque bueno, en breve estará en GitHub:


// Cargo las librerías
let phantom = require("phantom");
import test from 'ava';

// Para almacenar lo que PhantomJS necesita
let ph_, page_, status_;

// Función que carga la página
const load = async () => {
  await phantom.create().then(async ph => {
    ph_ = ph;
    return await ph_.createPage();
  }).then(page => {
    page_ = page;
    return page_.open('http://webslides.tv/');
  }).then(status => {
    status_ = status;
    return true;
  }).catch(e => console.log(e));
}

// Tests
test.serial("Page loaded", async t => {
  await load();
  t.is(status_, 'success');
});

test.serial('#webslides exits', async t => {
  await page_
    .evaluate( () => document.querySelector('#webslides') != null )
    .then( ws => { t.truthy(ws); } );
});

test.serial('WebSlides object exits', async t => {
  await page_
    .evaluate( () => window.ws != null )
    .then( ws => { t.truthy(ws); } );
});

/**
 * Last test
 */
test.serial('Closing', async t => {
  await page_.close();
  ph_.exit();
  t.true(true);
});
| | |

Ponle copyright a tus imágenes mediante PHP

ByLuis

copyright.png Muchas veces queremos que las personas se descarguen las imágenes que tenemos en nuestras páginas web, pero también queremos que quede bien claro quién es el autor. Para ello podemos editar todas las imágenes que tengamos, o bien que el propio entorno se encargue de poner el copyright por nosotros.

El método es sencillo, modificamos las opciones del Apache para que cuando se acceda a una imagen, lo redireccionemos a un script que se encargará de escribir el texto que queramos.

Read More “Ponle copyright a tus imágenes mediante PHP”

|

Algo de Javascript avanzado

ByLuis

Algo malo de dedicarse a la informática es que te puedes quedar anticuado con facilidad, algo bueno de ser blogger (al menos para mí) es que al querer dar buenas noticias y buenos scripts, te hace estar al día.
Algún compañero me ha preguntado alguna vez por partes de Javascript que no entendía, incluso me decía si realmente es Javascript. Supongo que a todos nos ha sonado raro el código Javascript cuando incluye JSON.
Lo malo es que cuando buscas por ese tipo de código que desconoces, buscas por términos como “javascript function”, “javascript avanzado”, y otras cosas que no suelen dar los resultados que esperamos. En el caso de “javascript function” nos suele dar cómo crear funciones, pero solo lo más básico, sin embargo, si hubieramos buscado por “javascript funciones anónimas” si hubieramos obtenido resultados deseados. Si buscamos por “javascript avanzado” solemos obtener directorios de efectos hechos en javascript y no las novedades que trae Javascript en sus nuevas versiones.
Por eso, si quieres aprender conceptos más avanzados de Javascript, te va a venir bastante bien este tutorial:
Quick guide to somewhat advanced JavaScript