HTML - drag n" drop

   
Vista:

drag n" drop

Publicado por Julio Cesar (17 intervenciones) el 30/10/2017 02:13:23
no logro colocar las imagenes.

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>
<head>
	<title>DRANGDROP2</title>
	<meta charset="utf-8">
	<style>
	html{
		background: radial-gradient(#9D2525,#531010);
		background-repeat: no-repeat;
	}
	#contenedor-principal{
		width: 450px;
		height: 600px;
		border: 5px solid #FFF;
		margin: auto;
		margin-top: 30px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	#cont_interno{
     display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		width: 210px;
		height: 580px;
		background: radial-gradient(#1A278B,#010942);
	}
	.contint{
     width: 200px;
     height: 120px;
     margin: 25px 0;
     background: radial-gradient(#1A278B,#010942);
     /*font-size: 25px;
     font-family: Verdana;
     color: #fff;
     text-align: center;*/
	}
   </style>
   <script>
 
   function comenzar(){
   	var banderas=document.querySelectorAll(".bandera");
   	for(var i=0;i<4;i++){
         banderas[i].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_interno">
	<img src="BRA.png" width="190" height="110" class="bandera">
	<img src="CAM.png" width="190" height="110" class="bandera">
	<img src="CAN.png" width="190" height="110" class="bandera">
	<img src="FRA.png" width="190" height="110" class="bandera">
</div>
<div id="caja_contenedores">
<div id="cont_interno1" class="contint" ondrop="soltado(event)" ondragover="sobre(event)"></div>
<div id="cont_interno2" class="contint" ondrop="soltado(event)" ondragover="sobre(event)"></div>
<div id="cont_interno3" class="contint" ondrop="soltado(event)" ondragover="sobre(event)"></div>
<div id="cont_interno4" class="contint" ondrop="soltado(event)" ondragover="sobre(event)"></div>
</div>
 
</div>
 
</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 Pedro

drag n" drop

Publicado por Pedro (15 intervenciones) el 30/10/2017 14:01:26
No me gusta nada pero de nada Flex y más después de descubrir Bootstrap y todo lo que se puede hacer, pero en fín estás ahí y como a mi me gusta ayudar a todo el mundo voy a compartir contigo esta tabla visual y explícita.

Cuando estuve trasteando con Flex y no lo comprendía al principio esta tabla me abrió las puertas del cielo espero sea de utilidad para tí

Understanding Flexbox

...ald---...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

drag n" drop

Publicado por Julio Carrasco (17 intervenciones) el 30/10/2017 21:44:55
Disculpa el tiempo perdido, pero no me refería al diseño, me refería a la api drag and drop, no puedo colocar las imagenes en los cuadros de al lado
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