Foros del Web » Programando para Internet » Javascript »

comportamiento variable de un Drag and Drop

Estas en el tema de comportamiento variable de un Drag and Drop en el foro de Javascript en Foros del Web. Hola: Tengo una serie de imágenes draggables . Las muevo a un conteneder y se copian en éste. Hasta aquí ningún problema. Pero después necesito ...
  #1 (permalink)  
Antiguo 15/04/2014, 16:22
 
Fecha de Ingreso: noviembre-2013
Mensajes: 10
Antigüedad: 7 años, 6 meses
Puntos: 1
comportamiento variable de un Drag and Drop

Hola:

Tengo una serie de imágenes draggables. Las muevo a un conteneder y se copian en éste. Hasta aquí ningún problema. Pero después necesito poder mover las imagenes dentro del contenedor para ordenarlas. El problema es que cuando suelto una imagen dentro del contenedor se copia en lugar de moverse para poder ordenarlas, ya que la función drop() que utilizo en este contenedor las copia.

Es decir, si cojo una imagen de fuera y la suelto en el contenedor tiene que copiarla, y si cojo una imagen dentro del contenedor y la suelto en otro lugar del contenedor la mueve.

¿Se le ocurre a alguien una solución?

Gracias de antemano

Última edición por davidferquin; 16/04/2014 a las 02:15 Razón: aclarar el titulo un poco mas
  #2 (permalink)  
Antiguo 16/04/2014, 04:50
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 13 años
Puntos: 1011
Respuesta: comportamiento variable de un Drag and Drop

este código mueve los elementos de una lista. puede que te de alguna idea
Cita:
<!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=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}



html, body {
width: 100%;
height: 100%;

}


.ordename {
width: 200px;
height: auto;
list-style-type: none;
position: absolute;
-moz-user-select: none;
-webkit-user-select: none;
cursor: move;
}

.lista1 {
left: 40%;
top: 100px;
}


.lista2 {
left: 40%;
top: 300px;
}


.ordename > li {
background-color: rgb(107, 100, 100);
height: 40px;
border: 1px solid rgb(255, 255, 255);
color: rgb(255, 255, 255);
text-align: center;
font: bold 2em Verdana;
}


.ordename > li:hover {
background-color: rgb(167, 62, 62);
}
</style>
<script type="text/javascript">
var ordenable = {

Evento : function(elemento, nomevento, fnc) {

if (elemento.addEventListener) {

elemento.addEventListener(nomevento, fnc, false);

} else if (elemento.attachEvent) {

elemento.attachEvent('on' + nomevento, fnc);
}
},



EventoIE8 : function (elemento, nomevento, fnc) {

if (elemento.addEventListener) {

elemento.addEventListener(nomevento, fnc, false);

} else if (elemento.attachEvent) {

elemento.attachEvent('on' + nomevento, function() { fnc.call(elemento, window.event);});

}
},



EventoEliminar : function(elemento, nomevento, fnc) {

if (elemento.removeEventListener) {

elemento.removeEventListener(nomevento, fnc, false);

} else if (elemento.detachEvent) {

elemento.detachEvent('on' + nomevento, fnc);
}
},



EventoCancelar : function(evt) {

var evt = evt || window.event;

if (evt.preventDefault) {

evt.preventDefault();

} else {

evt.returnValue = false;
}
},



EventoParar : function(evt) {

var evt = evt || window.event;

if (evt.stopPropagation) {

evt.stopPropagation();

} else {

evt.cancelBubble = true;

}
},



init : function() {

var e = document.querySelectorAll('.ordename');

for(var i = 0; i < e.length; i++) {

e[i].orden = new ordenable.orden(e[i]);
}

},


active : false,
listado : null,

orden : function(objetivo) {

var foo = null;
var elementos = objetivo.getElementsByTagName('li');
var from = null;
var to = null;

ordenable.Evento(document, 'mouseup', function(evt) {

if (ordenable.active == true) {

ordenable.active = false;
ordenable.EventoCancelar(evt);
ordenable.EventoParar(evt);
ordenable.EventoEliminar(ordenable.listado, 'mousemove', foo);

} else {

return;
}

});


for(var x = 0; x < elementos.length; x++) {

elementos[x].setAttribute('factor', x);

ordenable.EventoIE8(elementos[x], 'mousedown', function(evt) {

ordenable.EventoCancelar(evt);
ordenable.EventoParar(evt);

from = this;
ordenable.active = true;
from.style.backgroundColor = 'rgb(62, 129, 167)';

ordenable.Evento(this.parentNode, 'mousemove', foo = function(evt) {

ordenable.listado = this;
ordenable.EventoCancelar(evt);
ordenable.EventoParar(evt);
to = event.target || window.event.srcElement;

if (ordenable.active == true) {

if (from.attributes.factor.value > to.attributes.factor.value) {

this.insertBefore(from, to);

} else {

this.insertBefore(from, to.nextSibling);

}

for(var i = 0; i < elementos.length; i++) {

elementos[i].setAttribute('factor', i);
}
}

});

});
}

}
}


ordenable.Evento(window, 'load', ordenable.init);
</script>
</head>
<body>

<ul unselectable="on" class="ordename lista1">
<li>opción 1</li>
<li>opción 2</li>
<li>opción 3</li>
<li>opción 4</li>
</ul>



<ul unselectable="on" class="ordename lista2">
<li>opción 1</li>
<li>opción 2</li>
<li>opción 3</li>
<li>opción 4</li>
</ul>
</body>
</html>
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Etiquetas: drag, drop
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:48.