Hoy en día las aplicaciones web pretenden ser lo más interactivo que sea posible de manera que los usuario se sientan más cómodos al utilizarlas. Una de las características que más llama la atención es el efecto Drag andDrop, es decir, arrastrar un elemento desde un punto de la página web hasta otro. Este tipo de efectos se consigue con código JavaScript; JQuery es una librería de JavaScript que permite manipular los elementos de una página web y crear animaciones bastante buenas. Pues bien, en estos momentos me encuentro en un proyecto particular, parte de lo que debo hacer consiste en crear ese efecto de Drag and Drop, así que ahoracompartiré la primera parte con Uds.

Drag and Drop con JQuery en ASP .Net

 

Para conseguir este efecto he utilizado la librería 1.1.4 de JQuery y la librería Interface.js además de colocar el efecto dentro de una Master Page para que noten como se agregan los datos al TextBox a través de JavaScript, ya que con una Master Page los controles cambian de nombre en el resultado html. Al arrastrar cada elemento de una lista a otra, se ejecuta una función de JavaScript que se encarga de recorrer las listas con los elementos que contiene cada uno y colocarlas en un cuadro de texto de Asp .Net con el formato <idLista>|<idElemento> separadas cada una por comas. Cabe aclarar que la web esta construída con divs y hojas de estilo, respetando los estándares de usabilidad (suena bonito no?) y que los elementosque serán arrastrados son etiquetas <li> de html formateadas con CSS.

Pues bien, el proyecto contiene todo el código lo más sencillo posible de manera que al leerlo podrán entenderlo, se incluyen las librerías de JavaScript necesarios. y a partir de este punto ya pueden utilizarlo de la manera que deseen. El código lo pueden utilizar en cualquier tecnología web, es decir: ASP, ASP .Net, PHP, JSP, etc. Para el caso de ASP .Net lo único que se debe respetar es la forma de recuperar los datos hacia la caja de texto de ASP .Net ya que, como se comentó lineas arriba, los nombres de los controles suelen cambiar.

Descargar el ejemplo completo de: JQuery Drag & Drop

Espero que les sea de utilidad.

Saludos.