Javascript - Efecto agarrar y soltar

Códigos Javascript

Aplicamos este codigo para hacer el efecto drag&Drop o agarrar y soltar, en el ejemplo mostramos una imagen estatica y otra con el efecto.

Tutores.org

Inicio > Javascript

Visitas: 22,039 - 17/04/2003

EXPLICACION

Para agregar el efecto simplemente añade class="drag" a cualquier imagen en el documento.

CODIGO

Este codigo aun no ha sido probado por Tutores.org en Opera

Este codigo aun no ha sido probado por Tutores.org en Safari

# Codigo ofrecido por Tutores.org

<head>
<style>
<!--
.drag{position:relative;cursor:hand}
-->
</style>
<script language="JavaScript1.2">
<!--
var dragapproved=false
var z,x,y
function move(){
if (event.button==1&&dragapproved){
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
return false
}
}
function drags(){
if (!document.all)
return
if (event.srcElement.className=="drag"){
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
//-->
</script>
</head>
Imagen sin efecto<br>
<img src="/tut/images/mundo.gif"><br>
Imagen con efecto <br>
<img src="/tut/images/mundo.gif" class="drag"><br>

ENLACE AL CODIGO

Si quieres enlazar desde tu pagina a este codigo

<a title="Tutores.org - Efecto agarrar y soltar" href="http://www.tutores.org/codigo/393/" target="_blank">Efecto agarrar y soltar</a>

COMENTARIOS

Aun no existe ningun comentario para este Codigo.

INSERTAR COMENTARIO

Usuario:
Email:
Comentario:
	Codigo Seguridad
	Antes de enviar un comentario... Todos los comentarios son revisados personalmente Todo comentario que no haga relacion al codigo mostrado en esta pagina sera eliminado Usuarios registrados tienen preferencia en recibir respuestas de ayuda!! Ademas de poder insertar Imagenes,Enlaces y otras propiedades del editor. Por favor, insertar los comentarios descriptivos.