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
0
