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
Mostrando Codigo - Javascript
EXPLICACION
Para agregar el efecto simplemente añade class="drag" a cualquier imagen en el documento.
CODIGO
# 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<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Efecto agarrar y soltar" href="http://www.tutores.org/codigo/393/" target="_blank">Efecto agarrar y soltar</a>
<!-- Final enlace Tutores.org -->
<a title="Tutores.org - Efecto agarrar y soltar" href="http://www.tutores.org/codigo/393/" target="_blank">Efecto agarrar y soltar</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS