"Escucho con atencion a la gente que tiene la razón y prefiero seguir a los que tienen los resultados "

Soy una persona apasionada por todo lo que tiene que ver con Internet y las nuevas tecnologías. Soy autodidacta, y me encanta impartir clases...


Drag and Drop con Javascript

Miércoles 17 de Noviembre de 2010

Javascript
Autor: César Cancino
Categoría: Javascript
Etiquetas Programación, php, mysl
Comentarios 1

Este es un script que nos permitirá implementar un sencillo efecto de movimiento en nuestros sitios web. Consiste en la aplicación del método drag and drop usando Javascript. Esto nos permitirá mover objetos en el navegador usando el mouse. De la forma en la que lo usamos en este ejemplo, nos funcionará en todos los navegadores.

¿Qué te gustaría compartir con nosotros?

Compartir

Este es un script que nos permitirá implementar un sencillo efecto de movimiento en nuestros sitios web. Consiste en la aplicación del método drag and drop usando Javascript. Esto nos permitirá mover objetos en el navegador usando el mouse. De la forma en la que lo usamos en este ejemplo, nos funcionará en todos los navegadores.

A continuación les muestro una sencilla manera de implementarlo:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<script type="text/javascript">

function carga()

{

posicion=0;

// IE

if(navigator.userAgent.indexOf("MSIE")>=0) navegador=0;

// Otros

else navegador=1;

}

function evitaEventos(event)

{

// Funcion que evita que se ejecuten eventos adicionales

if(navegador==0)

{

window.event.cancelBubble=true;

window.event.returnValue=false;

}

if(navegador==1) event.preventDefault();

}



function comienzoMovimiento(event, id)

{

elMovimiento=document.getElementById(id);



// Obtengo la posicion del cursor

if(navegador==0)

{

cursorComienzoX=window.event.clientX+document.documentElement.scrollLeft+document.body.scrollLeft;

cursorComienzoY=window.event.clientY+document.documentElement.scrollTop+document.body.scrollTop;



document.attachEvent("onmousemove", enMovimiento);

document.attachEvent("onmouseup", finMovimiento);

}

if(navegador==1)

{

cursorComienzoX=event.clientX+window.scrollX;

cursorComienzoY=event.clientY+window.scrollY;

document.addEventListener("mousemove", enMovimiento, true);

document.addEventListener("mouseup", finMovimiento, true);

}



elComienzoX=parseInt(elMovimiento.style.left);

elComienzoY=parseInt(elMovimiento.style.top);

// Actualizo el posicion del elemento

elMovimiento.style.zIndex=++posicion;



evitaEventos(event);

}



function enMovimiento(event)

{

var xActual, yActual;

if(navegador==0)

{

xActual=window.event.clientX+document.documentElement.scrollLeft+document.body.scrollLeft;

yActual=window.event.clientY+document.documentElement.scrollTop+document.body.scrollTop;

}

if(navegador==1)

{

xActual=event.clientX+window.scrollX;

yActual=event.clientY+window.scrollY;

}



elMovimiento.style.left=(elComienzoX+xActual-cursorComienzoX)+"px";

elMovimiento.style.top=(elComienzoY+yActual-cursorComienzoY)+"px";



evitaEventos(event);

}

function finMovimiento(event)

{

if(navegador==0)

{

document.detachEvent("onmousemove", enMovimiento);

document.detachEvent("onmouseup", finMovimiento);

}

if(navegador==1)

{

document.removeEventListener("mousemove", enMovimiento, true);

document.removeEventListener("mouseup", finMovimiento, true);

}

}



window.onload=carga;

</script>

</head>

<body>

<div id="div1" style="top:100px; left:100px; position:absolute;" onmousedown="comienzoMovimiento(event, this.id);" onmouseover="this.style.cursor='move'">

<span style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">

Arrástrame

</span>
<img src="índice.png" border="0" title="Arrástrame">
</div>


</html>


1 Comentarios

  1. Alejandro Sanchez
    Sábado 08 de Octubre de 2011

    Hola amigo, super interesante tu codigo me sirvio bastante, pero ahora quiero hacerte una consulta estoy haciendo esto para que mis formularios queden con la opcion de moverlos, ya los puedo desplazar por toda la pantalla, pero los textbox quedan inactivos no puedo escribir sobre ellos. programo en c charp. muchas gracias por tu ayuda.