Foros del Web » Programando para Internet » Javascript »

Script para mover <div>'s por el sitio... funciona, pero ...

Estas en el tema de Script para mover <div>'s por el sitio... funciona, pero ... en el foro de Javascript en Foros del Web. Hola!, bueno, debo admitir una cosa, que desafortunadamente apenas se de javascript ):... Pero quisiera aprenderlo en pos de mis futuros sitios, el detalle es ...
  #1 (permalink)  
Antiguo 29/10/2010, 04:29
 
Fecha de Ingreso: mayo-2009
Mensajes: 37
Antigüedad: 15 años, 6 meses
Puntos: 0
Script para mover <div>'s por el sitio... funciona, pero ...

Hola!, bueno, debo admitir una cosa, que desafortunadamente apenas se de javascript ):...

Pero quisiera aprenderlo en pos de mis futuros sitios, el detalle es que ahorita estoy en un apuro jeje..

estoy manejando un sitio de fotografia donde quiero que la gente pueda "jugar" por asi decirlo con las fotografias, osea, que puedan mover las fotos de un lado a otro de la pagina libremente...

encontre un script que hace justamente lo mismo:

<script type="text/javascript">
//Si el navegador del cliente es Mozilla la variable siguiente valdrá true
var moz = document.getElementById && !document.all;
//Flag que indica si estamos o no en proceso de arrastrar el ratón
var estoyArrastrando = false;
//Variable para almacenar un puntero al objeto que estamos moviendo
var dobj;

function arrastrarRaton(e){
if (estoyArrastrando) {
newLeft = moz ? e.clientX : event.clientX;
newTop = moz ? e.clientY : event.clientY;

dobj.style.left = newLeft - parseInt(dobj.style.width)/2;
dobj.style.top = newTop - parseInt(dobj.style.height)/2;

return false;
}
}


function soltarBoton(e) {
estoyArrastrando = false;
}


function presionarBoton(e) {
//Obtenemos el elemento sobre el que se ha presionado el botón del ratón
var fobj = moz ? e.target : event.srcElement;

// Buscamos el primer elemento en la que esté contenido aquel sobre el que se ha pulsado
// que pertenezca a la clase objMovible.
while (fobj.tagName.toLowerCase() != "html" && fobj.className != "objMovible") {
fobj = moz ? fobj.parentNode : fobj.parentElement;
}

// Si hemos obtenido un objeto movible...
if (fobj.className == "objMovible") {
// Activamos el flag para indicar que se empieza a arrastrar
estoyArrastrando = true;
// Guardamos un puntero al objeto que se está moviendo en la variable global
dobj = fobj;

// Devolvemos false para no realizar ninguna acción posterior
return false;
}
}

document.onmousedown = presionarBoton;
document.onmouseup = soltarBoton;
document.onmousemove = arrastrarRaton;

document.oncontextmenu=new Function("return false");
</script>


entonces cuando alguien hace clic sobre un <div> que tenga dicha "class" como por ejemplo:

<div class="objMovible" style="width:411px; height:321px; background-image:url(fotos/imagen5.png); background-repeat:no-repeat;"></div>

Pues si, pueden mover la imagen por toda la pantalla libremente.... Cual es el problema ...?

El problema es que tambien, me gustaria que dichos "divs" fueran enlaces a secciones del sitio... El problema es que ya he intentado colocar un enlace en los <divs> de la clasica forma... osea:

<a href=""><div class="objMovible" style="width:411px; height:321px; background-image:url(fotos/imagen5.png); background-repeat:no-repeat;"></div> </a>

y funciona, pero digamos... hago clic en un <div>, pero mantengo presionado el mouse, al momento de soltarlo, me dirige a un sitio... y eso no es lo que necesito :(...

Lo que necesito es que por ejemplo, si comienzan a arrastrar el <div> por la pantalla, pues que solo arrastren dicho objeto, pero que si solamente dan un clic en el <div> este los lleve a dicha seccion...

Hay una forma sencilla de hacer esto :S?

Espero puedan ayudarme... Muchas gracias de antemano
  #2 (permalink)  
Antiguo 29/10/2010, 16:15
 
Fecha de Ingreso: mayo-2009
Mensajes: 37
Antigüedad: 15 años, 6 meses
Puntos: 0
Respuesta: Script para mover <div>'s por el sitio... funciona, pero ...

Hola!...
Ok ok, quiza no me explique bien en el post anterior (eran las 5am... y apenas terminaba otro script bastante complicado ais que sorry xD)

Lo que pasa es que si pongo simplemente un <a href=""> o un onClick="document.location='';", al momento que arrastro un layer, si suelto el boton del mouse, me lleva a dicha seccion. Lo que busco es que cuando esten arrastrando el layer y suelten el boton del mouse, no me lleve a ninguna pagina.

Código HTML:
<script type="text/javascript">
//Si el navegador del cliente es Mozilla la variable siguiente valdrá true
var moz = document.getElementById && !document.all;
//Flag que indica si estamos o no en proceso de arrastrar el ratón
var estoyArrastrando = false;
//Variable para almacenar un puntero al objeto que estamos moviendo
var dobj;

function arrastrarRaton(e){
if (estoyArrastrando) {
newLeft = moz ? e.clientX : event.clientX;
newTop = moz ? e.clientY : event.clientY;

dobj.style.left = newLeft - parseInt(dobj.style.width)/2;
dobj.style.top = newTop - parseInt(dobj.style.height)/2;

return false;
}
}


function soltarBoton(e) {
estoyArrastrando = false;
}


function presionarBoton(e) {
//Obtenemos el elemento sobre el que se ha presionado el botón del ratón
var fobj = moz ? e.target : event.srcElement;

// Buscamos el primer elemento en la que esté contenido aquel sobre el que se ha pulsado
// que pertenezca a la clase objMovible.
while (fobj.tagName.toLowerCase() != "html" && fobj.className != "objMovible") {
fobj = moz ? fobj.parentNode : fobj.parentElement;
}

// Si hemos obtenido un objeto movible...
if (fobj.className == "objMovible") {
// Activamos el flag para indicar que se empieza a arrastrar
estoyArrastrando = true;
// Guardamos un puntero al objeto que se está moviendo en la variable global
dobj = fobj;

// Devolvemos false para no realizar ninguna acción posterior
return false;
}
}

document.onmousedown = presionarBoton;
document.onmouseup = soltarBoton;
document.onmousemove = arrastrarRaton;

document.oncontextmenu=new Function("return false");
</script> 
El caso es que como ven, en el script que tengo para realizar el movimiento por la pantalla, estan las funciones presionar, soltar y arrastrar boton/raton... osea que este codigo si detecta cuando mueven el mouse o hacen click en el mismo...

Mi pregunta es... hay alguna posibilidad de que cuando entre el evento arrastrarRaton, pueda deshabilitar el enlace hecho con "Onclick = document.location" ??

Y, si solamente hacen click en el enlace, que los lleven a dicha seccion... muchas gracias y espero se pueda :(

Etiquetas: mover
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:58.