Arrastrar objetos

caricatos · #1 (**permalink**) 08/10/2007, 03:08

Hola:

Estoy intentando arrastrar objetos, pero no entiendo porqué las imágenes son más difíciles de arrastrar que las capas... lo único que pienso en que se diferencian es en el estilo display

La idea es con el evento mousedown asignar el objeto a una variable, con mouseup desasignarlo y con mouseover cambiar los estilos top y left según el movimiento del ratón...

Con explorer va bien, pero en los demás se arrastran mejor las capas que los objetos imagen...

Se puede ver en este enlace: Arrastrar objetos

y los códigos son:

Código:

<script type="text/javascript" >
<!--

var _navegador = navigator.userAgent;
var ie = /msi/i.test(_navegador);
var op = /opera/i.test(_navegador);
var mo = /gecko/i.test(_navegador);
var otro = !(ie || mo);

function tag(id)	{return document.getElementById(id);}

var selector = null;
var _px, _py, _dx, _dy;
function desseleccionar()	{
	selector = null;
}

function seleccionar(objeto)	{
	selector = objeto;
	_px = parseInt(objeto.style.left);
	_py = parseInt(objeto.style.top);
	_dx = ratitaX();
	_dy = ratitaY();
}

function mover(e)	{
	if (selector != null)	{
		_xx = ratitaX() - _dx;
		_nx = _px + _xx;

		_yy = ratitaY() - _dy;
		_ny = _py + _yy;

		selector.style.left = _nx + "px";
		selector.style.top = _ny + "px";

		if (ie)	{
//			window.event.cancelBubble = false;
			window.event.returnValue = false;
		}
		else	e.preventDefault();
			//e.returnValue = true;
			//e.stopPropagation();
			//return true;
	}
}
//-->
</script>

Las funciones ratitaX() y ratitaY() devuelven las coordenadas del ratón.

Saludos

KarlanKas · #2 (**permalink**) 08/10/2007, 04:35

Querido caricatos! qué divertido!! Y qué bien te va saliendo. Has probado en vez de poner onmouseover poner onmousemove. Tal vez así no se escape.

Nada, acabo de mirar el código de la página que pones y ya lo has puesto así...

Y si haces un doble control? Si en el onmouseout pones que si no ha soltado el ratón siga haciendo el mover?

Algo así:

Código:

	onmouseout="this.style.borderColor = 'transparent';if(selector!=null){mover(event)}"

No he podido probarlo. Probablemente no funcione, pero... quién sabe!? A ver si así consigues corregir el remoloneo que tiene a la hora de desplazar imágenes...

Tiempo después:

Con esto mejora mucho en IE, y con firefox sigue igual:

Código:

<body onmousemove="mover(event)">
<h1>
Arrastrar objetos
</h1>
<br />

<div id="imagen" style="position: relative">
<img
	src="../dibujos/webmaster.gif"
	alt="objeto"
	name="objeto"
	id="objeto_imagen1"
	onmouseover="this.style.borderColor = 'gray'"
	onmouseout="this.style.borderColor = 'transparent'"
	onmousedown="seleccionar(this)"
	onmouseup="desseleccionar()"
	style="cursor: move; position: absolute; top: -1px; left: -1px; border: 1px solid transparent"
/>

<div
	id="capa_imagen1"
	onmouseover="this.style.borderColor = 'gray'"
	onmouseout="this.style.borderColor = 'transparent'"
	onmousedown="seleccionar(this)"
	onmouseup="desseleccionar()"
	style="padding: 0; cursor: move; position: absolute; top: 40px; left: -1px; border: 1px solid transparent; background: url(../dibujos/webmaster.gif) no-repeat center center; width: 88px; height: 31px; overflow: hidden"
/>****
</div>

</body>

caricatos · #3 (**permalink**) 08/10/2007, 05:24

Hola Sr. Alienígena

:

Iba a responder que no cambiaba el resultado cuando vi tu ampliación de la respuesta, y veo que estamos atinando en la solución, ahora lo pruebo, aunque si dices que no mejora en FF...

Se me ocurre que puede estar el problema en eso del "burbujeo"... o sea que el move se intenta también producir en la capa contenedora o algo así... la idea que tenía era asignar el mousemove con addEventListener...

Bueno, seguiremos probando...

Saludos

derkenuke · #4 (**permalink**) 08/10/2007, 10:33

Hola a los dos caricatos y KarlanKas:

Que sepáis que me he estado un buen rato rompiéndome la cabeza, viendo que en IE se maneja bien la imagen y mal la capa, y en FF al revés totalmente.

He cambiado un monton de cosas, y he añadido otro montón, y todo inútilmente.

Parece ser que Firefox tiene algo interno, que al arrastrar la imagen me deja unos 3px, pero que luego se me cambia el cursor a un circulo tachado (osea, impedimento de la acción) y ya no ejecuta siquiera el onmouseout, se queda "trabado" hasta que hacemos mouseup.

Al IE se le escapa el DIV, pero sólo si hacemos un repentino mouseout mientras arrastramos, creo que se podría solventar. El truco de KarlanKas no me ha dado resultado, pero me ha servido de inspiración. He hecho una chapuza que funciona en IE:

Para los que moviendo el ratón sean más rápidos que el pensar de javascript, lo que hacemos es que si provocamos el onmouseout mientras estamos arrastrando, movemos la capa voluntariamente hacia donde está el ratón:

Código PHP:

  <div

    id="capa_imagen1"

    onmouseover="this.style.borderColor = 'gray'; clearInterval(sescapa)"

    onmouseout="this.style.borderColor = 'transparent'; if(selector!=null) sescapa = setInterval('mover()',1);"

 
    onmousedown="seleccionar(this)"

    onmouseup="desseleccionar()"

    style="padding: 0; position: absolute; top: 40px; left: -1px; border: 1px solid transparent; background: url(mover-objetos_files/webmaster.gif) no-repeat center center; width: 88px; height: 31px; overflow: hidden"

>****

</div>

Claro que hay que declarar como global la variable sescapa, y en Firefox no tiene más efecto que ralentizar, supongo.

Por cierto, he notado que ese DIV estaba doblemente cerrado.

Un saludo, y a ver si damos con la clave

caricatos · #5 (**permalink**) 09/10/2007, 02:56

Hola:

Pues tampoco veo que mejore, incluso al hacer los cambios empezó a provocar error el retorno del evento (e.preventDefault())... entonces quité la línea y funciona prácticamente igual...

Lo que he notado es que parece que la razón del "remoloneo" es porque la imagen "queda seleccionada"...

Tal vez haya algún atributo, tal vez del objeto window o document, que pueda deshabilitarse...

Saludos

KarlanKas · #6 (**permalink**) 09/10/2007, 03:45

Creo que la solución pasaría por el hecho de que siga la imagen o la capa al ratón en tanto en cuanto no se levante el dedo del botón del ratón. Se puede hacer de dos formas:
1. Haciendo que la posición de la imagen sea la del ratón.
2. Guardando la posición del ratón y que la imagen o la capa vaya yendo a esa posición.

Se me acaba de ocurrir que si hacemos un setInterval que vaya comprobando si se ha soltado el botón cada 2 décimas de segundo y si no se ha soltado que mueva el objeto. De esta forma evitamos que tenga que seguir cada posición del ratón de cada momento. No sé si me explico. Sería así:

onmousemove="setInterval('mover(event)',200)"

Más o menos... no sé si ha quedado claro.

Acabo de ver que la respuesta de dekernuke es muy parecida a la mía. Jeje. La diferencia está en que el setInterval se tome más tiempo para repetir la búsqueda para que no se sature.

derkenuke · #7 (**permalink**) 09/10/2007, 11:52

Cita:

Iniciado por caricatos

Pues tampoco veo que mejore, incluso al hacer los cambios empezó a provocar error el retorno del evento (e.preventDefault())... entonces quité la línea y funciona prácticamente igual...

Ups, esto pasa por no postear ejemplo completos modificados... olvidé escribir que comenté esa línea.

Cita:

Iniciado por caricatos

Lo que he notado es que parece que la razón del "remoloneo" es porque la imagen "queda seleccionada"...

Tal vez haya algún atributo, tal vez del objeto window o document, que pueda deshabilitarse...

Sí, es algo de seleccionar, pero nada parecido a onselect, ondragdrop o cosas así me ha dado resultado...

caricatos · #8 (**permalink**) 12/10/2007, 16:02

Hola:

He estado fuera unos "diíllas" y no pude probar nuevas cosas, pero he preparado una página donde se puede editar el propio código para probarlo (una de esas cosas raras que suelo hacer)... Arrastrar objetos ... debajo del recuadro donde están los objetos arrastrables está el código javascript... por debajo hay un botón de envío que refresca la página con el código del textarea y otro botón para abrir la página original...

Saludos y gracias por responder.

caricatos · #9 (**permalink**) 15/10/2007, 01:46

Hola:

Creo que como conclusión se podría decir que es mejor mover capas, y si se quiere mover imágenes que sean el fondo de una capa... he probado muchas opciones pero no he conseguido un buen resultado (al menos en mozilla)... mejoré la página para poder probar las modificaciones directamente, y se puede probar aquí: Arrastrar objetos... hay un recuadro con el código javascript de la página con un botón para probar los cambios que se realicen...

De todos modos, gracias por al menos intentarlo...

Saludetes

derkenuke · #10 (**permalink**) 15/10/2007, 10:50

Hola de nuevo caricatos.

Pues sí, podemos llegar a esa conclusión. Pero yo no me la creo muy bien. ¿Has investigado como lo han hecho los programadores que ya lo han intentado? Puede que en algún framework ya esté implementado, y haya algún truco (que no sea convertir la imagen en un DIV

).

Es que no me acabo de creer que no se pueda hacer un drag & drop de una imagen cómodamente... tiene que fallar algo, burbujeo de eventos, cancelación de alguno... algo.

Un saludo, y a ver si aparece un poco de luz en este asunto.

caricatos · #11 (**permalink**) 18/12/2007, 04:30

Hola:

He vuelto a interesarme en el tema, y viendo por la red los códigos que se usan, me he encontrado con cosas mucho más complejas de lo que creo que en realidad es necesario, y creo que lo que hacen (las versiones que funcionan) es ocultar con estilos los objetos que se quieren "movilizar", reemplazándolos por capas con carácteríasticas similares (posición, tamaño...), y probando con imágenes me ha funcionado, reemplazándolas por capas con la imágen en cuestión de fondo, y al ser un elemento "inline", con posición 0,0 y las dimensiones de la imágen.

Lo que he hecho está en Arrastrar y soltar objetos... como siempre se puede retocar en línea... una primera prueba sería comentar la inicialización para comprobar que se mantiene el aspecto original después de la inicialización... y procuré hacer el código no-intrusivo.

Hay una capa con una imágen que no funciona debidamente... creo que habría que chequear la existencia de imágenes dentro de los objetos "movibles"

Saludos

derkenuke · #12 (**permalink**) 18/12/2007, 16:32

Buen trabajo caricatos

No se me había ocurrido eso de reemplazar a los que daban problemas... Seguro que existen maneras de hacerlo 100% funcional.

Fíjate que la imagen del hacha cuando haces click sobre ella y arrastras funciona bien, pero si mueves el ratón con violencia y se escapa de la imagen (no muy dificil si pinchamos cerca de los bordes...) entonces la imagen se deja de mover y tenemos que "volver" a por ella sin soltar el ratón (incluso soltándolo se puede volver a por ella).

La de los asteríscos sigue sin dar ningún problema, y la capa_con_imagen todavía no sabemos qué hacer con ella, excepto convertirla al caso que no da ningún problema, ¿no es así? ¿Y qué pasa si la imagen no ocupa todo el DIV que hay que poner drag&drop'able? No se me ocurre entonces cómo funcionaría.

Un saludo.

caricatos · #13 (**permalink**) 18/12/2007, 18:06

Hola:

Otra idea es poner el objeto a movilizar en una especie de sandwich... una capa con las mismas dimensiones y posición absoluta, dentro la copia del objeto y por encima una capa con los eventos, pero actuando sobre su parentNode, en el mismo link de arriba puse las 2 versiones, y lo bueno es que los objetos no se manipulan (solo la posición)... lo digo por lo de las imágenes.

Lo que no me gusta es que falla algo en opera y en explorer, pero en safari y firefox creo que va bien.

Saludos

Panino5001 · #14 (**permalink**) 19/12/2007, 20:25

Hola, Pepe, yo hice esta prueba cun una capa y con una imagen, y ambas se comportan de la misma manera.
El código que usé es este:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<script>

//inicio lib

function $(id){

    return document.getElementById(id);    

}

function addEvent(obj, evType, fn, useCapture){

 

  if (obj.addEventListener){

    obj.addEventListener(evType, fn, useCapture);

    

  } else if (obj.attachEvent){

    obj.attachEvent("on"+evType, fn);

   

  } else {

   obj['on'+evType]=fn;

  }

}

 
function removeEvent(obj, evType, fn, useCapture){

  if (obj.removeEventListener){

    obj.removeEventListener(evType, fn, useCapture);

    return true;

  } else if (obj.detachEvent){

    obj.detachEvent("on"+evType, fn);

  

  } else {

      obj['on'+evType]=function(){};

     

  }

}

 
function stopEvent(e) {

    if (!e) e = window.event;

    if (e.stopPropagation) {

        e.stopPropagation();

    } else {

        e.cancelBubble = true;

    }

}

function cancelEvent(e) {

    if (!e) e = window.event;

    if (e.preventDefault) {

        e.preventDefault();

    } else {

        e.returnValue = false;

    }

}

//fin lib

arrastrable={};

function mover(e){

e=e || window.event;

o=e.srcElement || e.target;

arrastrable.c2x=e.clientX+document.documentElement.scrollLeft+document.body.scrollLeft;

arrastrable.c2y=e.clientY+document.documentElement.scrollTop+document.body.scrollTop;

o.style.left=arrastrable.c2x-arrastrable.c1x+arrastrable.o1x+'px';

o.style.top=arrastrable.c2y-arrastrable.c1y+arrastrable.o1y+'px';

cancelEvent(e);

stopEvent(e);

}

function detener(){

    removeEvent(document, 'mousemove', mover, false);

    removeEvent(document, 'mouseup', detener, false);

}

function i(e){

e=e || window.event;

o=e.srcElement || e.target;

if(o.position!="relative"||!o.style.position){

                o.style.position="relative";

                o.style.float="none";

            }

arrastrable.c1x=e.clientX+document.documentElement.scrollLeft+document.body.scrollLeft;

arrastrable.c1y=e.clientY+document.documentElement.scrollTop+document.body.scrollTop;

arrastrable.o1x=!isNaN(parseInt(o.style.left))?parseInt(o.style.left):0;

arrastrable.o1y=!isNaN(parseInt(o.style.top))?parseInt(o.style.top):0;

addEvent(document, 'mousemove',mover, false);

addEvent(document, 'mouseup',detener, false);

cancelEvent(e);

stopEvent(e);

}

 
window.onload=function(){

addEvent($('pp'), 'mousedown',i, false);

addEvent($('qq'), 'mousedown',i, false);

 
}

</script>

</head>

 
<body>

<div id="qq" style="background-color:#FF0000; width:100px; height:100px; color:#FFFFFF">test</div>

<img id="pp" src="tres.jpg" width="180" height="144" />

</body>

</html>

Básicamente, el arrastre de la imagen se hizo fluído al agregar estas 2 líneas en la función que maneja el evento mousedown:

Código PHP:

  cancelEvent(e);

stopEvent(e);

caricatos · #15 (**permalink**) 20/12/2007, 00:37

¡Excelente Andrés!

Me pareció extraño que preservara su ubicación sin hacer una copia del objeto y ocultar el original. Probé poner la imagen dentro de un párrafo, y se preserva el hueco, y después probé poner tags dentro de la capa y cada tag se podía mover independientemente de la capa contenedora (una curiosidad).

Panino5001 · #16 (**permalink**) 21/12/2007, 12:14

Sí, lo que estaba dentro de la capa también se arrastraba. En Firefox se arreglaba fácil, usando e.currentTarget y comparándolo con e.target (era un buen ejemplo de que no siempre son lo mismo), pero en explorer no encontré la manera de hacerlo, así que tuve que apelar a agregarle un atributo rel a los objetos arrastrables. Fue un ejercicio entretenido. Al final quedó así: ver ejemplo
Y este es el código:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script>
//inicio lib
function $(id){
    return document.getElementById(id);    
}
function addEvent(obj, evType, fn, useCapture){
 
 if (obj.addEventListener){
    obj.addEventListener(evType, fn, useCapture);
    
  } else if (obj.attachEvent){
    obj.attachEvent("on"+evType, fn);
   
  } else {
   obj['on'+evType]=fn;
  }
}

function removeEvent(obj, evType, fn, useCapture){
  if (obj.removeEventListener){
    obj.removeEventListener(evType, fn, useCapture);
  } else if (obj.detachEvent){
    obj.detachEvent("on"+evType, fn);
  } else {
    obj['on'+evType]=function(){};
  }
}

function stopEvent(e) {
    if (!e) e = window.event;
    if (e.stopPropagation) {
        e.stopPropagation();
    } else {
        e.cancelBubble = true;
    }
}
function cancelEvent(e) {
    if (!e) e = window.event;
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;
    }
}

function getElementsByRelName(rel){
    var col=[];
    var tCol=document.getElementsByTagName('*');
    for(var i=0;i<tCol.length;i++)
        if(tCol[i].getAttribute('rel')==rel)
            col.push(tCol[i].id)
    return col;
}

Array.prototype.in_array=function(){
    for(var j in this){
        if(this[j]==arguments[0]){
            return true;
        }
    }
    return false;    
}

function getNextHighestDepth(){
    var tCol=document.getElementsByTagName('*');
    var z=0;
        for(var i=0;i<tCol.length;i++){
            if(tCol[i].style.zIndex>z){
                z=tCol[i].style.zIndex;
            }
            
        }
    return ++z;
}

//fin lib

arrastrable={};

function mover(e){
    e=e || window.event;
    o=e.srcElement || e.target;
    if(!arrastrable.coleccion.in_array(o.id)){
        if(arrastrable.coleccion.in_array(o.parentNode.id))
            o=o.parentNode;
    }
    arrastrable.c2x=e.clientX+document.documentElement.scrollLeft+document.body.scrollLeft;
    arrastrable.c2y=e.clientY+document.documentElement.scrollTop+document.body.scrollTop;
    o.style.left=arrastrable.c2x-arrastrable.c1x+arrastrable.o1x+'px';
    o.style.top=arrastrable.c2y-arrastrable.c1y+arrastrable.o1y+'px';
    cancelEvent(e);
    stopEvent(e);
}

function detener(){
    removeEvent(document, 'mousemove', mover, false);
    removeEvent(document, 'mouseup', detener, false);
}

function i(e){
    arrastrable.coleccion=getElementsByRelName('arrastrables');
    e=e || window.event;
    o=e.srcElement || e.target;
    if(!arrastrable.coleccion.in_array(o.id)){
        if(arrastrable.coleccion.in_array(o.parentNode.id))
            o=o.parentNode;
    }
    if(o.position!="relative"||!o.style.position){
        o.style.position="relative";
        o.style.cssFloat="none";
        o.style.zIndex=getNextHighestDepth();
    }
    arrastrable.c1x=e.clientX+document.documentElement.scrollLeft+document.body.scrollLeft;
    arrastrable.c1y=e.clientY+document.documentElement.scrollTop+document.body.scrollTop;
    arrastrable.o1x=!isNaN(parseInt(o.style.left))?parseInt(o.style.left):0;
    arrastrable.o1y=!isNaN(parseInt(o.style.top))?parseInt(o.style.top):0;
    addEvent(document, 'mousemove',mover, false);
    addEvent(document, 'mouseup',detener, false);
    cancelEvent(e);
    stopEvent(e);
}

function makeDraggable(){
    for(var j=0;j<arguments.length;j++){
        $(arguments[j]).setAttribute('rel','arrastrables');
        $(arguments[j]).style.cursor='move';
        addEvent($(arguments[j]), 'mousedown',i, false);
    }
}

window.onload=function(){
    makeDraggable('pp','qq');
}
</script>
</head>

<body>
<div id="qq" style="background-color:#FF0000; width:100px; height:100px; color:#FFFFFF">test<br />
<img src="e1.gif" /></div>
<p style="border:1px solid #333333"><img id="pp" src="tres.jpg" width="180" height="144" /></p>
</body>
</html>

Algo que me parece curioso y que me hace dudar acerca de las ventajas de las nuevas formas de asignar eventos es que si simplificamos estas funciones de esta manera, todo funciona exactamente igual:

Código PHP:

  function addEvent(obj, evType, fn){
    obj['on'+evType]=fn;
}

function removeEvent(obj, evType){
    obj['on'+evType]=function(){};
}

Saludos y Felicidades anticipadas!

MaBoRaK · #17 (**permalink**) 21/12/2007, 15:52

loading.................

Bueno para que se pueda arrastrar las imágenes, hay que devolver en false el burbujeo, ya que Mozilla y Opera le añaden eventos extra a las imágenes que es el de arrastrar y soltar ya que con esta acción estos navegadores te guardan la imagen o lo abren en otra url.

Código PHP:

  if(window.event)

            {

                window.event.cancelBubble=true;

                window.event.returnValue=false;

            }

            else

            {

                e.preventDefault();

            }

Poner eso en el inicio y movimiento de la imagen..

Ahora bien, Es necesario asignar Event handlers.. porque tienes que eliminar el evento mouseup de la imagen... a no ser que en el mouseup le pongas

targetImagen.onmouseup=function(){}

Ahora bien, algo que yo uso en los event handlers para evitar los memory leaks es guardar los datos del evento en un array

Código PHP:

  var eventos = [];

eventos.push({

_on:"mouseup",

_cb:functionCallback

});

El método que añade el evento debe devolver el INDICE de su evento y al momento de eliminar el evento, se exapande el indice con los CLOSURES y simplemente lees los datos en el indice guardado y pones en nulo el indice que acaba de eliminarElEvento.

Y para los memory leaks, lees el array eventos y los quitas.

connection closed.

Giggo · #18 (**permalink**) 15/01/2009, 10:20

Hola

Soy nuevo en el foro. La verdad siempre me son de mucha utilidad.
Tengo una pregunta, ya aplique el código para arrastrar div, ¡excelente! pero tengo una duda, no sé si han visto esta página de google :

http://partnerpage.google.com/smallbiz.dell.com/es_mx?hl=es&client=dell-row&channel=mx-smb&ibd=5081030

¿Saben cómo se puede lograr esto de especificar zonas a donde se pueden arrastrar los div? Muchas gracias