| |

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

Laboratorio: eliminar HTML en cajas de texto con jQuery

ByLuis

Trasteando un poco con jQuery me ha dado por hacer una función que elimina las etiquetas HTML de una caja de texto de un formulario. Esto puede ser necesario cuando no se quiere que se introduzca HTML en un campo. Lógicamente, esto es la parte cliente, en el servidor debería haber una función similar que lo hiciera.

La función es sencilla, en cada input:text añadimos el evento change para que cuando se modifique el contenido, se ejecute la función de strip_tag, la cual crea un elemento DIV auxiliar, hago que su contenido sea el valor de la caja de texto, me quedo son con el texto e inserto este valor en el input:

$('document').ready(function() {
$(':text').change(function() {
$(this).attr('value', $('document').add('<div></div>').html($(this).attr('value')).text());
});
});

¿Dudas?, alguna. Si entre el texto pongo un <script>alert(1);</script> me ejecuta el script, algo no muy elegante. ¿Qué pasa con el elemento DIV creado?, ¿se queda en el limbo o se destruye?.

Bueno, para mis primeras pruebas con jQuery no está mal del todo.

jQuery 1.3

ByLuis

Leo en aNieto2K que ha salido a la luz la versión 1.3 de jQuery. Entre las novedades nos encontramos con un nuevo selector de elementos (Sizzle), delegación de eventos, el elemento Event, inyección HTML reescrita.
Andrés lo cuenta muy bien en su blog.
jQuery 1.3
Vía / aNieto2k

|

Laboratorio: indicativo de idioma y target en los enlaces mediante CSS

ByLuis

En muchas páginas he visto como se indica que un enlace va a abrirse en una ventana nueva con un icono que suele ser una flecha. También se suele indicar que el enlace es a una página en otro idioma mostrando la bandera del país o con un texto.

La verdad es que si tenemos que incluir la imagen en cada enlace que creamos, nos podemos volver locos, a parte de aburrirnos bastante. Una solución sencilla es mediante estilos, para ello usaremos los selectores de atributos y los pseudo-elementos.

Contaremos con dos imágenes: una para indicar un enlace externo (abrir.gif) y otra para indicar el país (inglés en este caso gb.png). También tendremos en cuenta que es posible que el enlace se abra en otra ventana y que sea en inglés.

Para poder realizarlo mediante estilos necesitamos el pseudo-elemento :after, el cual nos permite incluir contenido después del propio contenido del elemento, usando para ello también la propiedad content. También será necesario asignar el estilo de los elementos según sus atributos usando para ello selectores de atributos. Usaremos el atributo hreflang para indicar el idioma y si contiene el atributo target supondremos que es un enlace externo.

a[target]:after {
padding-left: 4px;
content: url(abrir.gif);
}
a[hreflang="en"]:after {
padding-left: 4px;
content: url(gb.png);
}
a[target][hreflang="en"]:after {
padding-left: 4px;
content: url(gb.png) "  " url(abrir.gif);
}

Funciona en Firefox y en Opera, en Safari supongo que también. En nuestro amigo IE no funciona, al menos en la versión 6, si alguien me puede confirmar en Safari y en IE7, se lo agradeceré en el alma.

Ejemplo

inlineEdit: editor de contenidos con Mootools

ByLuis

inlineEdit2 es un editor de contenidos inline realizado con Mootools.

Su uso es muy sencillo, tan solo es necesario añadir el siguiente código para poder utilizarlo:

$('element').inlineEdit();

Lo más asombroso es su tamaño, 20k sin comprimir, y para los que estén deseando mirar su funcionamiento, aquí va el código:

var inlineEdit = new Class({
getOptions: function(){
return {
onComplete: function(el,oldContent,newContent){
},
type: 'input'
};
},
initialize: function(element,options){
this.setOptions(this.getOptions(), options);
if(!element.innerHTML.toLowerCase().match('<'+this.options.type)){
this.editting = element;
this.oldContent = element.innerHTML;
var content = this.oldContent.trim().replace(new RegExp("<br>", "gi"), "\n");
this.inputBox = new Element(this.options.type).setProperty('value',content).setStyles('margin:0;background:transparent;width:99.5%;font-size:100%;border:0;');
if(!this.inputBox.value){this.inputBox.setHTML(content)}
this.setAllStyles(element,this.inputBox);
this.editting.setHTML('');
this.inputBox.injectInside(this.editting);
(function(){this.inputBox.focus()}.bind(this)).delay(300);
this.inputBox.addEvent('change',this.onSave.bind(this));
this.inputBox.addEvent('blur',this.onSave.bind(this));
}
},
onSave: function(){
this.inputBox.removeEvents();
this.newContent = this.inputBox.value.trim().replace(new RegExp("\n", "gi"), "<br>");
this.editting.setHTML(this.newContent);
this.fireEvent('onComplete', [this.editting,this.oldContent,this.newContent]);
},
setAllStyles: function(prevel,el){
if(prevel.getStyle('font'))el.setStyle('font', prevel.getStyle('font'));
if(prevel.getStyle('font-family'))el.setStyle('font-family', prevel.getStyle('font-family'));
if(prevel.getStyle('font-weight'))el.setStyle('font-weight', prevel.getStyle('font-weight'));
if(prevel.getStyle('line-height'))el.setStyle('line-height', prevel.getStyle('line-height'));
if(prevel.getStyle('letter-spacing'))el.setStyle('letter-spacing', prevel.getStyle('letter-spacing'));
if(prevel.getStyle('color'))el.setStyle('color', prevel.getStyle('color'));
}
});
Element.extend({
inlineEdit: function(options) {
return new inlineEdit(this, options);
}
});
inlineEdit.implement(new Events);
inlineEdit.implement(new Options);

Algo que nos puede ser útil en lugares como wikis o parecidos.

inlineEdit 2

JSDoc: documentar javascript

ByLuis

JSDoc es una aplicación realizada en Perl que nos genera la documentación de nuestros scripts Javascript de forma automática. Basado en el conocido javadoc, obtiene los comentarios de documentación (/** … */) para obtener la información sobre las funciones.

Así, por ejemplo, si tenemos la siguiente función:

/**
* Figura es una clase abstracta. Define
* lo que otras subclases heredarán de una
* figura geométrica genérica
* @constructor
*/
function Figura(color){
this.color = color;
}

obtendremos lo siguiente:

Constructor Summary
Shape ()
Construct a new Shape object.

JSDoc

Vía / Blogging Dashin