Desplazar div con el mouse como una app de Android

[charlie27]

Hola a todos tengo una duda respecto a una implementacion.
Veran tengo un div cuyas dimensiones son muy grandes, por ahora de width: 2000px y height:500px; esta dentro de otro div que tiene un atributo CSS overflow: scroll; lo cual hace que aparezcan las barras de "navegacion" necesito implementar con javascript los metodos necesarios para poder desplazar el div al hacer click sobre el, dejarlo sostenido y moverlo en cualquier direccion. Como si se navegara en un sitio web desde un android o iphone con los dedos, el gesto del dedo haca arriba, desplaza la pagina hacia abajo y asi.

Pretendo hacer eso pero con el mouse sobre ese div! hasta ahora tengo entendido que:

1.- debo capturar el onclick sobre el div
2.- hacer una especie de "listener" para que mientras se tenga pulsado boton del mouse y este tenga un movimiento, se despaze el div.

Bueno aqui es donde no tengo idea, no pretendo que me den el codigo solo una idea para saber que tengo que hacer, no se me ocurre!

Aca una idea de una demo de un framework de interfaces de usuario para desarrollo de aplicaciones moviles.
http://demos.kendoui.com/mobile/overview/index.html

Como ven es un listado de paises si hacen clic sobre el telefono y desplazan hacia arriba baja la lista de paises. Pretendo lo mismo pero en todas direcciones.

Bueno saludos y espero su respuesta

[furoya]

Es un simple arrastre. Y ya está muy visto.

Efecto en imagen

texto que sobrepasa div

[charlie27]

Iniciado por furoya

Es un simple arrastre. Y ya está muy visto.

Que tal furoya gracias por la respuesta
En tu primer enlace la respuesta que das http://www.forosdelweb.com/f13/efect...9/#post4238531 no es tanto una solucion, ese tipo de navegacion esta integrada en los navegadores, no se exactamente desde cuando pero sin duda desde que se implemento el tercer boton en el mouse (scroll) en cualquier web donde tu aprietes la rueda (scroll) se observara la imagen de navegacion

El segundo enlace que me has proporcionado http://www.forosdelweb.com/f4/texto-...4/#post2540586 tiene unas implementaciones de css y javascript, bueno la segunda implementacion para navegar con la rueda (scroll) del mouse no funciona Y la ultima con javascript tiene errores de implementacion en tu funcion

Código Javascript:

function alturas(T00) {
 
                texto = T00.firstChild;
                
                var alto = texto.offsetHeight;
               
                T00.style.height = alto +"px";
                T00.style.position = "relative";
                texto.style.position = "absolute";
 
            }
 

texto no obtiene nigun valor, vere que puedo hacer para que funcione y comento que sucede. Bueno tanto has dicho que es algo muy visto, si he visto ese tipo de navegaciones en otros lados implementados de diferentes maneras, pero cada quien sabe para que hace o investiga respecto a sus soluciones. Quizas te confundiste respecto a lo que estoy buscando pero es basicamente mover el div con el mouse en vez de usar las barras de navegacion.

Vere que encuentro pues anque esta muy visto como dices, la mayoria de ejemplos son de drag and drop y no quiero usar librerias o copiar el codigo de otras webs.

Bueno de nuevo gracias por la respuesta y los demas amigos del foro espero tengan una idea de antemano gracias !

[charlie27]

Bueno pues tuve que forzar de algun modo el codigo de furoya pasando el objecto a traves de su ID con document.getElementById("miDIV01"); y ya funciona al arrastrar el texto este se mueve perfectamente. Solo que hace un posicionamiento del div atribuyendole position: absolute y sus respectivos top, left, etc. Lo que necesito es navegar dicho div, pero usando el mouse y no las barras de navegacion. esto solo hace un pocisionamiento y no mueve las barras como si se navegara.

Tambien me parece increible que no funcione como lo tiene pues le pasa todo el nodo padre y obtiene su primero nodo hijo con firstChild, la variable me devuelve el siguiente valor viendo la consola webkit

texto = <TextNode textContent="\n ">

Pero al intentar obtener su posicion, como indica el codigo de furoya, pues marca un error de tipo


TypeError: texto.style is undefined
texto.style.position = "absolute";


En fun lo unico que hice fue esto

Código Javascript:

function alturas(T00) {
 
                texto = document.getElementById("miDIV01");
                var alto = texto.offsetHeight;
 
                T00.style.height = alto +"px";
                T00.style.position = "relative";
                texto.style.position = "absolute";
 
            }
 

Bueno creo que ando cerca. Gracias de nuevo por la respuesta, se aceptan mas comentarios y se les agradece!

[furoya]

Sí, por supuesto que el primer enlace es una humorada.

Con respecto al otro, los ejemplos son muy viejos, seguramente hay que revisarlos.
Pero el de la ruedita es el primero de ese tema, no el segundo. Y anda perfectamente en IE y Chr. Pero parece que ya no anda en Op. Lo voy a revisar algún día; quizá haya cambiado el nombre del evento.

El segundo anda en FF, Chr, Op y no lo pude probar en IE mayor que 6. Pero debe funcionar.
Aclaro, por si alguien te hace algún caso.
Y es justamente lo que estás pidiendo. Se llama "arrastrar" y es archiconocido.

Si en vez de usar mi ejemplo, te escribiste otro, mira bien que no tenga algún error, como un salto de línea en el source antes del contenido arrastrable.
Eso te devolvería como firstChild un TextNode conteniendo ese salto, que se vería como "\n".

No sé si me interpretás lo que te quiero significar...

Si hiciste una prueba que no te anda, mostrá el código. Así no tenemos que estar adivinando dónde le erraste.


De nada.


(La verdad, me da pena tener que ser tan duro. Por lo menos trataste de hacer algo con el código. Te falta algún conocimiento todavía, pero no todo el mundo sabe aún de ese problema en la interpretación de nodos.
El error viene de la implementación del lenguaje ... y ya es incorregible.)

[charlie27]

Y es justamente lo que estás pidiendo. Se llama "arrastrar" y es archiconocido.

Si eso me queda super claro incluso antes de plantear la duda en el foro, pero como menciono nuevamente no intentaba arrastrar y desplazar a traves de su posicionamiento en el DOM, intentaba desplazar la pagina usando las barras de navegacion o scrolls.

En fin no discutire mas por algo que no se entiende como...

Eso te devolvería como firstChild un TextNode conteniendo ese salto, que se vería como "\n".

Por eso me temo que esto se usa mas para parsear xml verdad?

(La verdad, me da pena tener que ser tan duro. Por lo menos trataste de hacer algo con el código. Te falta algún conocimiento todavía, pero no todo el mundo sabe aún de ese problema en la interpretación de nodos.
El error viene de la implementación del lenguaje ... y ya es incorregible.)

A mi me dio pena agena ver que se cree que tiene lo correcto pero

Si tu intención es describir la verdad, hazlo con sencillez y la elegancia déjasela al sastre.

Gracias por tus comentarios

[furoya]

¡Claro, querías poner una scrollbar! ¡Cómo no adiviné!

Bah. cómo no adiviné que venís a molestar. Es imposible que alguien no conozca overflow: auto, o como dijiste en el primer post, scroll. Por eso empezaste con lo de arrastrar contenido, pero como ya se te puso un ejemplo, y no te di lugar para inventar que no anda, ahora volvés a la barra de desplazamiento.

Bueno, vos juntás post inútiles para ensuciar el Foro. Yo aprovecho a dejar links para que los novatos aprendan algún efecto más.
Y al menos me enteré que uno de los que puse no anda en Opera (en Firefox ya sabía).

Gracias por el aviso.

[charlie27]

Iniciado por furoya

¡Claro, querías poner una scrollbar! ¡Cómo no adiviné!

Bah. cómo no adiviné que venís a molestar. Es imposible que alguien no conozca overflow: auto, o como dijiste en el primer post, scroll. Por eso empezaste con lo de arrastrar contenido, pero como ya se te puso un ejemplo, y no te di lugar para inventar que no anda, ahora volvés a la barra de desplazamiento.

Bueno, vos juntás post inútiles para ensuciar el Foro. Yo aprovecho a dejar links para que los novatos aprendan algún efecto más.
Y al menos me enteré que uno de los que puse no anda en Opera (en Firefox ya sabía).

Gracias por el aviso.

Claro! como digas!