Ejemplo Drag & Drop con Jquery
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.
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.
Esta en ASP!!!!
No conoces el php???
Hola Mario, si lo conozco pero no me agrada mucho, y además, yo desarrollo en ASP .Net, sin embargo, este ejemplo lo puedes utilizar perfectamente en PHP, JSP u otro con solo un par de modificaciones muy sencillas.
Saludos.
Estaria buenisimo que mostraras el codigo directamente… para no tener que descargar el .rar subirlo al servidor local… ejecutarlo.. ver donde esta el codigo… en fin… es solo una critica constructiva… muchos exitos con tu blog!…
el “Manu”.
Amigo, como puedo reemplazar los “div” por “listBox” por ejemplo?, la idea es llenar con elementos traidos de la bdatos y al arrastrar los elementos guardarlos en la badatos.
Hola, vi tu ejemplo, está bueno.
no tendrias uno en java?
te lo agradecería.
Mario tu eres anormal, no?
lo maximo brother parece bueno lo voy aprobar en jsp y te comento como me fue
No, para nada. No soy anormal. Simplemente me facilito las cosas. Si quiero que algo funcione en todos lados uso algo multiplataforma, No soy de aquellos que usan solo windows. Ahh un geek dirán, tampoco, es saber hacer las cosas para que funcionen siempre en cualquier lugar. Es hacer bien el trabajo. Si no os gusta el php bien, pero te digo que puedes hacer muchas y mejores cosas.
No entiendo como pueden programar en esta basura de lenguaje… Aparte de ser feo, es un choreo de java… Viva php.
@Zoky: En cuanto a PHP, el 90% de los programadores es DESORDENADO, y porqué lo es? porque el lenguaje te permite todo ese desorden.
Ahora, cada quien trabaja en lo que mejor se desenvuelve, yo no trabajaría con PHP, no me agrada, me resulta enredado, desordenado, etc; en cuanto a .Net, bueno, solo decir, que puedes hacer mucho con él.
Saludos.
Primero aqui esta el codigo para php, no tuve tiempo de hacerlo “ordenadamente” por que solo queria verlo funcionando.
[code]
Documento sin título
jQuery(document).ready(function(){
jQuery('ul#listaInicial').Sortable({accept: 'elemento', opacity: 0.8, revert: true, onStop: verificarDatos});
jQuery('ul#listaUno').Sortable({accept: 'elemento', opacity: 0.8, revert: true, onStop: verificarDatos});
jQuery('ul#listaDos').Sortable({accept: 'elemento', opacity: 0.8, revert: true, onStop: verificarDatos});
});
function verificarDatos(){
var strCadena = "";
var elementos = document.getElementById("grupoDestinos").getElementsByTagName("ul");
for (var i=0; i < elementos.length; i++) {
var subElementos = document.getElementById(elementos[i].id).getElementsByTagName("li");
for (var j=0; j < subElementos.length; j++)
strCadena = strCadena + elementos[i].id + "|" + subElementos[j].id + ",";
}
var rpta = document.getElementById("divResultado").getElementsByTagName("input");
rpta[0].value = strCadena;
}
function addLoadEvent(func){
if (typeof wpOnload!='function'){
wpOnload=func;
}else{
var oldonload=wpOnload;
wpOnload = function(){
oldonload();
func();
}
}
}
Seleccione sus elementos...
Elemento 01
Elemento 02
Elemento 03
Elemento 04
Elemento 05
Elemento 06
Elemento 07
Elemento 08
Elemento 09
Elemento 10
Agregue elementos a la lista uno
Agregue elementos a la lista dos
Los elementos seleccionados son:
[/code]
Perdón creo que no salio el código completamente, seguramente el envió tiene algún filtro anti inyección, pero bueno.
Con respecto a lo que comentaban de los lenguajes de programación puedo decir lo siguiente:
Todos son geniales, personalmente he programado en Java, ASP, PHP y hasta C# un poco. Los lenguajes no son los malos los malos son los programadores, no entiendo como pueden decir o dar una opinión de que un lenguaje es basura o no.
ASP y .NET tiene algo fantastico y es que muchas cosas ya vienen desarrolladas y listas para implementarse.
Java cuenta con los Struts y Frameworks como Spring que también lo hacen muy buena opción.
Y PHP toda la flexibilidad, varios frameworks para desarrollo y que si es una copia de Java, por favor eso es una pendejada departe de quien lo diga, acaso no han visto C++, Java es muy similar, pero no por esto es una copia, así que vamos cada quien que programe lo que le de la gana y como quiera. Si usan algún patrón de desarrollo mucho mejor, no todos tenemos la oportunidad de hacerlo de esa forma, mucho tiene que ver el ambiente de la empresa para la cual desarrolles…
Saludos y ya dejen de discutir por los lenguajes de programación.
# Mario Soto
Mayo 28th, 2008 at 5:45 pm
Esta en ASP!!!!
No conoces el php???
# h@nz
Mayo 29th, 2008 at 2:41 pm
Hola Mario, si lo conozco pero no me agrada mucho, y además, yo desarrollo en ASP .Net, sin embargo, este ejemplo lo puedes utilizar perfectamente en PHP, JSP u otro con solo un par de modificaciones muy sencillas.
Saludos.
que no te agrada mucho? asi de buen programador serás….. fuck microsoft compadre…. el php es infinitamente mejor y tiene mas posibilidades que asp….
Podrias poner de nueva cuenta el código, esque el link ya redirecciona a hotmail y no me manda el archivo… te lo agradecería mucho.. gracias
Soy programador PHP y odio completamente a Microsoft (pero es un mal necesario), y se que es muy bueno y todo, pero cada cual se maneja a su gusto con su lenguaje. Y en todo caso, estan ensuciando a los programadores de PHP porque nos estan dando una imagen de autoritarios.
Gracias por compartir el codigo.
Saludos,
@Mario Soto
PHP es malo, y mal pagado
La mayoria de los que dicen “fack microsoft” es por que les cuesta reconocer que c# y .net son tecnologias extraordinarias… para lograr algo en php? 2332 meses, para lograrlo en c# 1 dia?? mmm c# se esta burlando en estos momentos de java, ademas yo trabajo por plata php paga 1/4 de lo que paga .Net corta y fome. Y al que no le guste que siga mediocramente desarrollando en php.
Se me olvidaba, no esta en asp esta en .NET que no es lo mismo… y con esos conocimientos se quejan de microsoft?? seguramente son puros nob kiddiez!!
@mario soto
deje de sufrir por el lenguaje viejo, sabemos que es un volador programando peeero le informo ud debe aprender a tener en cuenta los tiempos de desarrollo y la comercialización del software, lamentablemente las empresas generalmente piden desarrollos en plataforma microsoft y la otra es que php es un desorden a no ser de que use smarty o herramientas parecidas, igual ud es un valiente nadando contra la corriente, lastima que los valientes casi siempre terminan de martires…. suerte
Hooola, el ejemplo me ha servido muucho, agradezco tu aporte
He tratado que los elementos de la lista inicial sean ‘movibles’ a la segunda lista pero que a su vez queden elementos del mismo tipo y así se puedan agregar más y más.
Que funcionara como una caja de herramientas, donde puedes agregar el mismo elemento más de una vez.
Alguna idea, en la documentación de INTERFACE.JS no encuentro un método o evento q
Hooola, el ejemplo me ha servido muucho, agradezco tu aporte
He tratado que los elementos de la lista inicial sean ‘movibles’ a la segunda lista pero que a su vez queden elementos del mismo tipo y así se puedan agregar más y más.
Que funcionara como una caja de herramientas, donde puedes agregar el mismo elemento más de una vez.
Alguna idea, en la documentación de INTERFACE.JS no encuentro un método o evento q me permita hacerlo.,
se agradece el apoyo de antemano