Phenobarbital con Soda

En algún momento te haz preguntado; ¿Como obtengo el objeto, que estoy arrastrando con el ratón usando jquery.ui?; la pregunta es facil de responder y trataremos de explicar algunas cosas sobre draggables y dropables para entender mejor.

El concepto para comenzar a utilizar ui.draggables y ui.droppables es sencillo; simplemente creen un par de DIV (de ejemplo); cada uno con un nombre distinto (pueden, opcionalmente, agregarle el classname “draggable” o “droppable” para llegarle por selectores CSS como siempre se puede en jquery) y posicionenlos en cualquier area separada de pantalla (sea usando position: absolute o porque los han colocado dentro de tablas o celdas separadas).

Ahora viene la magia! detrás de jquery: para arrastrar simplemente declaren al DIV1 draggable:

$(”#dragged”).draggable();

Opcionalmente, pueden decirle al objeto draggable que genere un “clon”; esto es, que cuando se inicia el arrastre del objeto; no se arrastra al DIV1, sino a un “clon” del DIV1.

$(”#dragged”).draggable({
helper: ‘clone’
});

Posteriormente viene la declaración del DIV2, en este caso un contenedor de objetos “arrastrados” (droppable); igual que el anterior, podemos indicar que es droppable:

$(”#dropped”).droppable();

Claro, en este caso podemos contar con ciertas opciones para restringir o personalizar nuestro “droppable”:

accept: “.draggable”, : nos permite indicar que tipo de objeto (referencia a un id o selector) aceptará este droppable

activeClass: ‘droppable-active’, :cuando el droppable tenga dentro de si un “draggable”, cambiará su CSS a este estilo

hoverClass: ‘droppable-hover’, : cuando pasamos por encima (mouseover) el objeto draggable, esta será el estilo CSS aplicado

tolerance: ‘fit’ :tipo de tolerancia con los draggables, puede ser “fit”, si caen completo dentro del droppable, “intersect”, si los bordes del droppable y el draggable se intersectan.

Además, droppable posee una serie de “eventos” que pueden ser funciones callback que ocurren cuando un draggable los libera.

ejemplos:

drop: function(ev, ui) { //ocurre cuando el draggable cae dentro del droppable
},

activate: function(ev, ui) { //ocurre cuando el draggable se activa (comienza a ser arrastrado)
},

deactivate: function(ev, ui) { //ocurre cuando el draggable deja de ser arrastrado
},

como todo evento de droppable, posee 1 referencia implicita y dos parámetros; la referencia implicita es al objeto “this”; que se refiere al objeto droppable;

$(this).append(”");

o sin necesidad de jquery: var iddrop = this.id;

y ev, que se refiere al gestor de eventos (al DOM Event de la página actual).

con EV podemos obtener ejemplo, las coordenadas de donde ha estado el draggable:

ev.ClientX / evClientY

ahora, quien es ui?, con ese nombre tan críptico, uno no sabe lo que es.

Pues bueno, siguiendo la regla de John Resig (primeras opciones, parámetros, segundas, propiedades, ultimas, callbacks); ese ui debe ser un objeto o una propiedad de droppable; en este caso, UI retorna una referencia al objeto arrastrado (es decir al draggable).

ej.

var id = ui.draggable.element.id;

o

$(ui.draggable.element).

Con lo cual podemos extraer toda la información que necesitemos del elemento que fue arrastrado.

El bloque de código que usé para pruebas fue el siguiente:


$(document).ready(function(){
$(”#dragged”).draggable({
helper: ‘clone’
});
$(”#dropped”).droppable({
accept: “.draggable”,
activeClass: ‘droppable-active’,
hoverClass: ‘droppable-hover’,
drop: function(ev, ui) {
//alert(ev.clientX);
$(this).append(”<br>Dropped!”);
},
deactivate: function(ev, ui) {
alert(ui.draggable.element.id);
$(this).append($(document.createElement(’div’)).text(’deactivate’));
},
tolerance: ‘fit’
});
});


Tal vez algunos de ustedes recibieron un correo que decia algo como:

Tienes que echarle un ojo a mi nuevo vicio.
Estoy tan seguro de que te va a gustar que te he registrado…sólo falta tu confirmación!

http://us1.badoo.com/phenobarbital/in/104063

Ya me cuentas!

Jesus Lara

Esta invitación ha sido enviada con fecha 7/05/07 21:57 a Perico de los palotes <pericopalotes@gmail.com > a petición de Jesus Lara <jesuslarag@gmail.com>.
Si no deseas recibir más mails nuestros, haz clic aquí.

Apenado, les explicaré la situación:

Una "amiga" me comentó de una interesante aplicación web 2.0 para redes sociales que apuntala mucha de su interfaz gráfica a AJAX, de manera interesante y por gran curiosidad decido inscribirme y probar su aplicación; se llama "badoo.com" y es supuestamente una comunidad virtual de perfiles de usuario para que cada quien se describa y diga como es …

Aqui viene lo interesante, la aplicación (como muchas otras, hi5, etc) solicita un mail para que "invites" a tus "amigos" a la nueva comunidad, a diferencia de otros scripts de este tipo donde te presentan la lista de direcciones y tu decides a quien invitar; los seres inventores de esta aplicación se les ocurrió hacerlo de manera automática!, es decir, tomar tooodas mis 500 direcciones y como buen spam, hacerselas llegar a mis jefes, colegas, mi madre, mi hermano en europa, a la infanta helena y como no, a perico de los palotes.

Sin permiso de mi parte (no hay licencia legal que lo permita) convierten mi dirección en un fuerte emisor de spam publicitario de su comunidad y para colmo, al parecer lo venden a otras listas!, porque mi spam se ha mulplicado por 10 desde que estoy suscrito a ellos.

Para colmo de males, estética y de interface estan gachos, interfaces poco intuitivas y javascripts de gran peso hacen dificil la aplicación incluso en un core duo (el exceso de ajax es malo, siempre); no hay muchos botones y a veces no hay forma de conseguir como hacer las cosas.

Para peor colmo, al igual que match y otras comunidades deshonestas, el 70% de los lindos y hermosos cuerpos que se ven en los perfiles son falsos; en una revisión rápida me encontré con cientos de perfiles donde los datos eran falsos (extraidos de gmail o de algunas comunidades vecinas como hi5) y las fotos eran afamadas actrices porno.

O sea, gracias a Dios y estoy en Linux, porque si hubiera estado en winDOS, capaz y hasta me instalan un troyano …

Todo sea por tener 6 millones de usuarios, asi sean falsos … xD

Hace 2 dias recompilé PHP para activar un par de extensiones, entre ellas la tidy html (para limpieza de código html) y la JSON (javascript Serialize Object Notation) para intercambiar (mas que todo objetos) entre el cliente web y el servidor; sin embargo, para mi sorpresa hoy (mejor dicho, ayer a mediados de la tarde) han liberado PHP 5.2.0, que trae a tidy y a json incluidos *by default* con lo cual decidí hacer un upgrade a mi estación de trabajo (este servidor seguirá el ejemplo que el portatil dió en un par de días luego de las pruebas de rigor).

Lo que puedo asegurar luego de las pruebas es que tanto la ampliación de javascript para JSON como la extensión de PHP para JSON son la mar de sencillas de utilizar; en el primer caso con simplemente hacer var sjson = oExample.toJSONString(); entonces contamos con que cualquier string, objeto u array será convertido a la notación JSON:
ej javascript:

var oExample = new Object();
oExample.id = 10;
oExample.className = 20;
oExample.position = 30;
oExample.value = “Jesus”;
oExample.newValue = “Lara”;

es llevado a la forma:
{”id”:10,”className”:20,”position”:30,”value”:”Jesus”,”newValue”:”Lara”}

La cual puede ser enviada facilmente a través de AJAX usando POST.
Del lado del servidor, podemos contar con algo parecido y es que podemos tomar los datos recibidos y con $obj = json_decode($json); obtendremos un objeto con todas las mismas propiedades del objeto javascript, es decir $obj->value o $obj->className.

Pero eso no queda allí, si tomamos cualquier clase y creamos un objeto:

ej php:
class objeto {
public $id = 10;
public $className = 20;
public $position = 30;
public $value = ‘Jesus’;
public $newValue = ‘Lara’;
}
$obj = new objeto();

podemos entonces con $strjson = json_encode($obj); obtener la misma version serializada pero ahora para javascript de un objeto PHP, podemos serializar casi cualquier cosa, exceptuando recursos (como datastreams o conexiones a bases de datos), haciendolo mucho más flexible y potente que las soluciones ajax basadas en XML.

Por cierto, el unico punto en contra a JSON es que no es tan “Human readable” como XML, pero al final de cuentas, tanto JSON como XML son strings para alimentar aplicaciones AJAX y no van a ser vistos por ojos humanos, asi que que importa si el string de JSON es mas complejo (aunque mas compacto) que el XML si nunca lo vamos a ver de frente? …

por cierto, y para terminar, el objeto php serializado que hemos recibido lo podemos devolver a una forma javascript con la siguiente linea de codigo:

var oExample = a.parseJSON();
document.getElementById(”resultado”).innerHTML = oExample.value+’ ‘+oExample.newValue;

Con lo cual como observan, contamos con la flexibilidad de enviar objetos sumamente complejos y grandes cantidades de datos en un solo y unico string sin tener que estar haciendo parsing de una estructura xml (que de por si es bastante engorroso andar pensando en childNodes y getElementsByTagName cuando podemos tener todo en un objeto, DOM queda para otras situaciones).

Les contaré de mis progresos por esta via …