Empezaré como siempre con las librerias que vamos a utilizar.

1. Jquery
2. Ui.base.js
3. Ui.base.draggable.js
4. Ui.base.droppable.js

Con estas librerias vamos a poder hacer unos efectos muy interesante, a continuacion os voy a detallar un poco un codigo de ejemplo.

HTML

Javascript

Vamos a explicar por partes cada elemento.
.dragable ( con esta opcion le damos la propiedad Dragg al objeto con clase .block, es decir el div con la  clase .block se puede arrastrar y mover por la pantalla)
.helper:’clone’ <- Evidentemente como su nombre indica le hemos dicho que a la hora de arrastar clone el objeto a arrastrar.

Por otro lado tenemos las ordenes para el objeto con clase .drop:
accept:’.block’ <- le indicamos que el objeto solo aceptara aquellos con clase .block, es decir que solo podremos arrastrar a la zona .drop objetos con clase . block
activeClass: ‘nombre de clase’ <- obvio no? clase asignada al objeto con clase .drop cuando esta activo.
hoverClass:’nombre de clase’<- lo mismo que la anterior pero en este caso cuando situamos el objeto por encima de la zona .drop
drop:function<- se utiliza esta opcion para decirle que vamos a hacer cuando el objeto sea arrastrado a la zona .drop.

$(this).append(”<br>Dropped!”); <- obviamente en este ejemplo cuando arrastramos .block sobre .drop en el div con clase .drop se le añade el mensaje Dropped y un salto de linea.

Imaginaros ahora las posibilidades, lo sencillo que ha sido darle a un objeto la movilidad y lo sencillo que es asignar una zona para dejar esos objetos, evidentemente esa zona la podemos definir dentro de un css, otorgandole el estilo que nos venga bien en cada momento, como veis es muy sencillo hacer un carrito de compra al mas puro estilo arratrar y soltar.

Este plugin de Jquery tiene multiples opciones asi como no solo con objetos si no tambien con listas o tablas, de esta forma resulta muy util por ejemplo si queremos ordenar una lista o cambiar los contenidos de una celda  otra en una tabla.

Aqui os dejo un ejemplo,

http://docs.jquery.com/UI/Droppables

En el siguiente tutorial explicare algunos metodos mas de arrastrar y soltar objetos, y haremos un carrito de compra arrastrando productos del escaparate a la cesta, saludos.

Daniel.

Como siempre necesitaremos una serie de archivos que aquí os enseño.

La magestuosa
- Jquery.js
- MultiFile.js
- Metafile <– Lo necesitaremos para ahorrar un poco de trabajo ( en otro Post comentare su funcionamiento).

Y ahora el código para empezar y algunos ejemplos.

METODO 1.

Aquí os voy a explicar un poco los argumento que se han usado y para lo que valen, este ejemplo utiliza el plugin METADATA ¿Por que? por que pasamos los argumento directamente dentro de la class del objeto tipo FILE.

En primer lugar podeis observar que dentro de la class metemos varias cosas directamente.
Accept:’Tipo de extension | Tipo de extension, etc..’ Soporta todas las extensiones graficas, tambien podriamos poner las extensiones tipo word o txt, etc…
remove:’Texto’, es el texto que saldra junto al fichero seleccionado en caso de que no queramos subirlo.
Selected:’texto: $file’ <– Igual que el anterior la variable $file contiene el nombre del archivo seleccionado.
denied:’texto $ext’<– el texto que sale cuando el archivo tiene una extensión no válida, la variable $ext contiene la extension del archivo que ha intentado subir.
duplicate:’texto:\n$file!’ <– texto bla bla, y el nombre del archivo.

METODO 2 ( sin el plugin METADATA ):

HTML

JAVASCRIPT

Evidentemente en este tutorial no voy a explicar el funcionamiento del framework Jquery, para los que aun no sepan como funciona pueden buscar en google manuales o esperar que en breve hare un pequeño tutorial para explicar el funcionamiento, nomenclaturas, usos y demas para programadores novatos.

En este ejemplo la funcion Jquery cuando se ejecuta al comienzo de la carga coge los elementos que contengan “<span style=”color: #900;”>#PortugueseFileUpload</span>” y le da la propiedad multifile del plugin, lo único que comentare aquí es la nueva opción
Max: ‘Numero’, <– el numero es la cantidad de archivos que dejara subir de una vez.

METODO 3
HTML

JAVASCRIPT

En este ejemplo es un claro uso de Jquery en multi seleccion de objetos y agregarles a estos la opcion de multifile.

La demo de todo esto lo podeis ver en la pagina donde he traducido todo esto.
- Fyneworks

Aquí termina el tutorial.

ATENCIOOONN, por supesto javascript no está preparado para subir archivos a un servidor, este ejemplo sólo funciona con la siguiente rutina PHP, ASP; ETC.. que son los encargados de hacer estos menesteres, en el siguiente tutorial explico cómo subir archivos al modo FLICKR o GMAIL un saludo…..

DANIEL

Manos a la obra… La utilidad que os presento es Jeditable, un plugin de Jquery que nos permitira la edicion in situ de etiquetas en nuestra página web de esta forma podremos hacer unos CMS mucho mas vistosos y atractivos tanto para nuestras páginas como para nuestros clientes.

Necesitaremos.

Jquery – Descarga.
Jeditable – Descarga.

Voy a basar este tutorial exclusivamente a Jeditable dando por sentado que conoceis un poco el framework Jquery y sus nomenclaruras.

EJemplo básico:

Codigo HTML:

Codigo JAVASCRIPT

Con esto le hemos dicho a Jeditable que escoja todos los elementos con clase “edit” y les de las funcionalidades de Jeditable, entre parentesis ponemos que programa php ha de recibir los datos y gestionarlos “http://www.example.com/save.php”.

Un ejemplo visual sacado del creador de Jeditable.

Pero esto no queda aquí Jeditable tiene multiples configuraciones para poder realizar todas las tareas más basicas de edición de una pagina, tanto como el uso de SELECTS, TEXTAREAS, control sobre los eventos, CLICK, DOBLECLICK, HOVER, ETC.. A continuación os hago un breve resumen de todas opciones, para mas información podeis ir a la web del creador, está en ingles pero es bastante visual.

En primer lugar haré una breve descripcion de las opciones y las posibilidades de cada una.

‘Type’: ‘Select’ (para que al editar salga una lista SELECT), ‘Text’ (para un cuadro de texto), ‘TextArea’ (obviooooooo)

‘Cancel’: ‘Etiqueta’ (Saldrá un boton de cancelar y podremos darle el nombre que deseemos’

‘SUbmit’: ‘OK’ (igual que el anterior pero para que salga un botón de confirmar’

‘Indicator’: ‘ ‘ (Es lo que sale cuando se está procesando la etiqueta “… Cargando”, “<img src=”mi_imagen.jpg” />)

‘tooltip’: ‘Mensaje’ (Obviamente saldrá cuando nos situemos por encima de la etiqueta el texto escrito en Mensaje)

‘loadurl’: ‘url’ (En este parametro pondremos la direccion de una url en caso de que queramos generar ese parametro dinámicamente “ejem:carga.php”)

Estas son la utilidades basicas a continuación os explico varios usos mas, por ejem la introducción de clases dentro de las propias ediciones.

En este ejemplo a todos los elementos con la clase “.editable” le añadimos la clase “.someclass”

¿Util verdad? Ahora os mostrare algunos ejemplos mas del uso de Jeditable añadiendo las opciones que os he mostrado anteriormente.

SELECT

Lo mismo a todas los objetos con clase editable le añade la opcion de poder editarlas y para ello en la etiqueta data le añade la, “‘opción’ : ‘valor’, ‘opcion’:'valor’” separando con comas cada elemento.
Le dice que es un tipo SELECT ( muestra objeto de formulario SELECT).
Le dice que quiere un boton de confirmación con la etiqueta ‘OK’.

Además podemos hacer que esos mismos datos que hemos picado a mano en la etiqueta “data”, los saque dinámicamente de un php por ejem:

El archivo Php. (miarchivo.php)

JAVASCRIPT

Aqui podemos observar que el campo SELECT los datos los obtiene de miarchivo.php

TEXTAREA

Podemos observar el type le dice que sea un text area.
No comentare lo del submit.
Observamos la inclusión de una nueva opción “callback” esto se utiliza para un manejo mas minucioso del flujo de datos, por ello introducimos una funcion dentro del propio Jeditable.

Abreis observado que en ningún momento e usado la etiqueta (type : “TEXT”) es la que sale por defecto al crear el objeto .editable.

Por último os enseñare los eventos que se pueden usar sobre este plugin.
Para ello utilizaremos la opcion “event:’evento’”
Codigo

Cuando agamos doble click sobre el objeto se podrá editar.

Cuando pasemos el raton por encima del objeto se podrá editar.

Para finalizar la pregunta del millón, ¿Como localiza mi programa php que variable ha de modificar?, pues bien dentro de la codificacion html Jeditable pasará como variables por defecto el ID y VALUE=a los datos modificados.

Ejemplo de recepción del php (Maskadito no os quejareis :>)
save.php

Bueno aquí os dejo otra vez la demo para que podais observar las posibilidades un saludo y hasta otro Post.

Daniel Perez.