|
|
| Hola |
| // Compatibilidad con el innombrable engendro de mocosoft var is_ie = navigator.appName == 'Microsoft Internet Explorer'; // Compatibilidad con Opera var is_op = navigator.appName == 'Opera' ? true : false; // Compatibilidad con firefox o netscape var is_ns = !is_ie && !is_op ? true : false; // Función principal.... /* Esta función require dos parámetros el primero de ellos (e) es el evento el segundo es el elemento sobre el que se desea arrastrar y soltar. */ function js_drag(e,elemento) { // Por situaciónes de compatibilidad para ns es 'e' suficiente, en cambio para IE e no basta sino window // aún no entiendo ¿por qué? acaso no se supone que TODO se basa en el objeto window 8-) e||window.event; var e = e; // Creamos un nuevo Objeto var Obj = new Object(); // Obtenemos el tag BODY, ( siempre hay uno de esos )... var body = document.getElementsByTagName('body')[0]; // El z-index ( el arrange , Hasta al frente, Hasta el fondo etc.. ) Obj.zI = 0; // Ahora, el argumento 'elemento' puede ser un objeto o bien una id del elemento // es decir js_drag(event,this) ó js_drag(event,'id') Obj.Elemento = typeof(elemento) == 'object' ? elemento : document.getElementById(elemento); // Esta función obtiene la posición en la que está el elemento HTML. js_position = function(ly,x,y) { /* Si es IE u Opera sumamos: clientX ( que es la posición del ratón en la ventana ) document.documentElement.scrollLeft ( qué es la posición del mouse en el elemento ) body.scrollLeft ( que es el scroll que se le ha dado a la página ) Si es ns ( firefox, netscape, etcétera, ) Sólo sumamos la posición del raton en la ventana y el scroll que se le ha dado a la página. */ x = is_ie||is_op ? e.clientX + document.documentElement.scrollLeft + body.scrollLeft : e.clientX + window.scrollX; y = is_ie||is_op ? e.clientY + document.documentElement.scrollTop + body.scrollTop : e.clientY + window.scrollY; // Guardamos la posición 'x' y 'y' inicial del elemento en una variable ( contando el scroll ). Obj.startX=x; Obj.startY=y; // Guardamos la posición 'Left' y 'Right' inicial del elemento en una variable ( sin contar el scroll ). Obj.startL=parseInt(Obj.Elemento.style.left,10); Obj.startT=parseInt(Obj.Elemento.style.top,10); Obj.startL=isNaN(Obj.startL) ? 0 : Obj.startL; Obj.startT=isNaN(Obj.startT) ? 0 : Obj.startT; // Aumentamos el z-index del objeto para enviarlo hasta el frente ( aunque para IE esto no significa NADA ) Obj.Elemento.style.zIndex = ++Obj.zI; /* js_addEvent() es una función propia, que añade al primer argumento en este caso 'document' una función en este caso 'startdrag' que se ejecuta cada segundo argumento en este caso 'mousemove' */ js_addEvent(document,'mousemove',startdrag); // mouseup para cuando se 'suelte' el elemento js_addEvent(document,'mouseup',enddrag); // keypress para cuando se presione una tecla o se haga click por cuestiones conocidas // ¿ realmente necesito explicar que es por IE ? js_addEvent(document,'keypress',enddrag); // Ahora prevenimos que los eventos que acabamos de agregar se ejecuten inmediatamente if(is_ie){ e.cancelBubble = true; e.returnValue = false; } else { e.preventDefault(); } }; startdrag = function(e) { // Esto ya lo expliqué arriba... var x, y; e||event; x = is_ie||is_op ? e.clientX + document.documentElement.scrollLeft + body.scrollLeft : e.clientX + window.scrollX; y = is_ie||is_op ? e.clientY + document.documentElement.scrollTop + body.scrollTop : e.clientY + window.scrollY; // Sumamos las posiciones guardardas y las actuales y ésa es la posición actual ( a donde debe moverse ) ILeft = ( Obj.startL + x - parseInt(Obj.startX) ); ITop = ( Obj.startT + y - parseInt(Obj.startY) ); // js_moveTo esta función cambia la posición del elemento cambiando el estilo css presizamente 'top' y 'left' js_moveTo(Obj.Elemento,ILeft,ITop); // Esto también lo expliqué arriba... if(is_ie){ e.cancelBubble = true; e.returnValue = false; }else { e.preventDefault(); } }; enddrag = function (e) { // Cuando se deje de arrastrar entonces eliminamos los eventos que ya no nos sirven. js_detEvent(document,'mousemove',startdrag); js_detEvent(document,'mouseup',enddrag); }; // Aquí inicializamos el arrastrar y soltar.... js_position(Obj.Elemento,e.clientX,e.clientY); }; js_moveTo = function(element,Left,Top) { element.style.left = Left + "px"; element.style.top = Top + "px"; }; // Función que agrega los eventos js_addEvent = function(Layer,eventype,func) { // addEventListener,attachEvent son propiedades para agregar funciones a eventos if( is_ns ) Layer.addEventListener( eventype, func, true ); else if( is_ie ) Layer.attachEvent( "on" + eventype, func ); else // Opera simplemente lo usa como un array. Layer[ "on" + eventype ] = func; }; // Igual que la función de arriba sólo que aquí quitamos las funciones a los eventos. js_detEvent = function(Layer,typef,func) { if(is_ie) Layer.detachEvent("on" + typef, func); else if(is_ns) Layer.removeEventListener( typef, func, true); else Layer["on" + typef] = null; }; |
5.- Matio Dan
4.- Rafael
3.- Danny Gutiérrez
[BOLSA DE TRABAJO]
Estas buscando trabajo, te gusta la programación y tienes conocimientos en PHP, JavaScript, Mysql, HTML entonces te podría interesar esta propuesta laboral.
Clic aquí para ver puesto.
