1 <div id="list_draggable" class="arrastrable">2 <div id="drag0" class="cuadrado" draggable="true">A</div>3 <div id="drag1" class="cuadrado" draggable="true">B</div>4 <div id="drag2" class="cuadrado" draggable="true">C</div>5 <div id="drag3" class="cuadrado" draggable="true">D</div>6 </div>7 8 9 <div id="log" class="log">10 <div></div>11 </div>12 13 14 <script type="text/javascript">15 16 function log(message) {17 var div = document.createElement('div');18 div.innerHTML = message;19 var log = document.getElementById('log');20 log.insertBefore(div, log.firstChild);21 }22 23 // Objetos arrastrables24 var list_draggable = new Array();25 list_draggable[0] = document.getElementById('drag0');26 list_draggable[1] = document.getElementById('drag1');27 list_draggable[2] = document.getElementById('drag2');28 list_draggable[3] = document.getElementById('drag3');29 30 31 function handleDragStart(event) {32 this.style.color = 'silver';33 log('DragStart '+this.innerHTML);34 }35 36 37 function handleDragOver(e) {38 if (e.preventDefault) {39 e.preventDefault(); // Necessary. Allows us to drop.40 }41 log('DragOver '+this.innerHTML);42 return false;43 }44 45 function handleDragEnter(event) {46 log('DragEnter '+this.innerHTML);47 }48 49 function handleDragLeave(e) {50 log('DragLeave'+this.innerHTML);51 }52 53 function handleDrop(event) {54 // this / e.target is current target element.55 56 if (event.stopPropagation) {57 event.stopPropagation(); // stops the browser from redirecting.58 }59 log('Drop '+this.innerHTML);60 return false;61 }62 63 64 function handleDragEnd(e) {65 // this/e.target is the source node.66 log('DragEnd '+this.innerHTML);67 }68 69 70 for (key in list_draggable) {71 list_draggable[key].addEventListener('dragover', handleDragOver, false);72 list_draggable[key].addEventListener('dragenter', handleDragEnter, false);73 list_draggable[key].addEventListener('dragleave', handleDragLeave, false);74 list_draggable[key].addEventListener('drop', handleDrop, false);75 list_draggable[key].addEventListener('dragend', handleDragEnd, false);76 list_draggable[key].addEventListener('dragstart', handleDragStart, false);77 }78 79 80 81 82 </script>Enlace
El enlace para compartir es: