HTML - API DRAG DROP prueba

   
Vista:

API DRAG DROP prueba

Publicado por Julio Cesar (17 intervenciones) el 26/09/2017 02:27:51
solo quiero posicionar una de las imagenes en el cuadro pero no encuentro el error o lo que me hace falta.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GALERIA API DRAG DROP</title>
<style>
 
#cajaimagen{
    float: left;
    width: 300px;
    margin: 30px;
    border: 1px solid #125;
}
 
#zonadestino{
    float: left;
    width: 500px;
    height: 300px;
    margin: 100px;
    border: 1px solid #125;
}
 
img{
    width: 180px;
    height: 130px;
}
</style>
 
<script>
var elem_destino;
function comenzar(){
	var imagenes=document.querySelectorAll("#cajaimagen img");
	for(var i=0;i<imagenes.length;i++){
		imagenes[i].addEventListener("dragstart",comenzando_arrastrar,false);
	}
	elem_destino=document.getElementById("zonadestino");
	elem_destino.addEventListener("dragenter", function(e){e.preventDefault();},false);
	elem_destino.addEventListener("dragover", function(e){e.preventDefault();},false);
	elem_destino.addEventListener("drop", soltado, false);
 
}
 
function comenzando_arrastar(e){
	var elemento=e.target;
	e.dataTransfer.setData("Text", elemento.getAttribute("id"));
}
 
function soltado(e){
	e.preventDefault();
	var id=e.dataTransfer.getData("Text");
           var src=document.getElementById(id).src;
           elem_destino.innerHTML="<img src='" + src + "'>";
}
 
window.addEventListener("load",comenzar,false);
</script>
 
</head>
<body>
<section id="zonadestino">
Arrastre las imagenes aquí
</section>
<section id="cajaimagen">
	<img src="BRA.png" id="imagen1">
	<img src="FRA.png" id="imagen2">
	<img src="CAM.png" id="imagen3">
	<img src="CAN.png" id="imagen4">
</section>
</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de abzerox

API DRAG DROP prueba

Publicado por abzerox (21 intervenciones) el 27/09/2017 05:39:40
Hola, has escrito mal el nombre de la función => comenzando_arrastrar.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar

API DRAG DROP prueba

Publicado por Julio Cesar (17 intervenciones) el 28/09/2017 00:31:20
lo revisé mil veces y no lo noté. Gracias!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

API DRAG DROP prueba

Publicado por Julio Cesar (17 intervenciones) el 07/10/2017 05:02:22
Disculpa la molestia, he creado otro código de la misma API; esta vez no se que está mal, estoy seguro que no es un error ortográfico; sino de sintaxis.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
	<title>DRANGDROP2</title>
	<meta charset="utf-8">
	<style>
	html{
		height: 100%;
		background: radial-gradient(#9D2525,#531010);
		background-repeat: no-repeat;
	}
	#contenedor-principal{
		width: 500px;
		height: 330px;
		border: 5px solid #FFF;
		margin: auto;
		margin-top: 120px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	.contint{
     display: flex;
		justify-content: space-around;
		align-items: center;
		width: 210px;
		height: 300px;
		background: radial-gradient(#1A278B,#010942);
	}
   </style>
   <script>
 
   var bandera=document.getElementById('bandera');
 
   function comenzar(){
   	bandera.addEventListener("dragstart",comienza_arrastrar,false);
   }
 
   function comienza_arrastrar(event){
     event.dataTransfer.setData("text", event.target.getAttribute("id"));
   }
 
   function sobre(event){
   	event.preventDefault();
   }
 
   function soltado(event){
   	event.preventDefault();
   	var dato=event.dataTransfer.getData("text");
   	event.target.appendChild(document.getElementById(dato));
   }
   window.addEventListener("load",comenzar,false);
 
   </script>
</head>
<body>
<div id="contenedor-principal" >
<div id="cont_interno1" class="contint" ondrop="soltado(event)" ondragover="sobre(event)" >
	<img src="BRA.png" width="190" height="110" id="bandera">
</div>
<div id="cont_interno2" class="contint" ondrop="soltado(event)" ondragover="sobre(event)" >
</div>
</div>
 
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de abzerox

API DRAG DROP prueba

Publicado por abzerox (21 intervenciones) el 07/10/2017 23:16:00
Hola, el problema es que estas intentando seleccionar un elemento del DOM antes de que este se cree. Existen varias soluciones una de ellas es poner el script antes de la etiqueta final del body o la otra es mantener la variable bandera como global inicialmente con un valor null y asignar su valor luego de cargado el DOM dentro de la función comenzar la cual es el callback asignado al evento load. Prueba de esta manera:

1
2
3
4
5
6
7
8
9
10
11
<script>
var bander = null;
function comenzar(){
      bandera = document.getElementById('bandera');
      bandera.addEventListener("dragstart",comienza_arrastrar,false);
}
 
...
..
.
</script>

No comentas.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar