1 Drag and Drop2 <div id="list_draggable" class="arrastrable">3 <div id="drag0" class="cuadrado" draggable="true">A</div>4 <div id="drag1" class="cuadrado" draggable="true">B</div>5 <div id="drag2" class="cuadrado" draggable="true">C</div>6 <div id="drag3" class="cuadrado" draggable="true"></div>7 </div>8 9 10 <div id="log" class="log">11 <div></div>12 </div>13 14 15 <script type="text/javascript">16 17 function log(message) {18 var div = document.createElement('div');19 div.innerHTML = message;20 var log = document.getElementById('log');21 log.insertBefore(div, log.firstChild);22 }23 24 // Objetos arrastrables25 var list_draggable = new Array();26 list_draggable[0] = document.getElementById('drag0');27 list_draggable[1] = document.getElementById('drag1');28 list_draggable[2] = document.getElementById('drag2');29 list_draggable[3] = document.getElementById('drag3');30 31 32 function handleDragStart(event) {33 this.style.color = 'silver';34 log('DragStart '+this.innerHTML);35 event.dataTransfer.setData('Text', this.getAttribute('id'));36 }37 38 39 function handleDragOver(e) {40 if (e.preventDefault) {41 e.preventDefault(); // Necessary. Allows us to drop.42 }43 //log('DragOver '+this.innerHTML);44 return false;45 }46 47 function handleDragEnter(event) {48 //log('DragEnter '+this.innerHTML);49 }50 51 function handleDragLeave(e) {52 //log('DragLeave'+this.innerHTML);53 }54 55 function handleDrop(event) {56 // this / e.target is current target element.57 58 if (event.stopPropagation) {59 event.stopPropagation(); // stops the browser from redirecting.60 }61 log('Drop '+this.innerHTML);62 63 var s = '';64 for (key in event.dataTransfer.files[0]) {65 s += key+'='+event.dataTransfer.files[0][key]+'<br>';66 }67 log (s);68 69 var object_source = document.getElementById(event.dataTransfer.getData('Text'));70 object_source.style.borderColor = 'red';71 72 73 74 if(this.offsetTop>object_source.offsetTop) {75 this.parentNode.insertBefore(object_source, this.nextSibling);76 } else {77 this.parentNode.insertBefore(object_source, this);78 }79 80 81 82 83 84 return false;85 }86 87 var origen = null;88 89 function handleDragEnd(e) {90 // this/e.target is the source node.91 log('DragEnd '+this.innerHTML);92 this.style.color = '';93 }94 95 96 for (key in list_draggable) {97 list_draggable[key].addEventListener('dragover', handleDragOver, false);98 list_draggable[key].addEventListener('dragenter', handleDragEnter, false);99 list_draggable[key].addEventListener('dragleave', handleDragLeave, false);100 list_draggable[key].addEventListener('drop', handleDrop, false);101 list_draggable[key].addEventListener('dragend', handleDragEnd, false);102 list_draggable[key].addEventListener('dragstart', handleDragStart, false);103 }104 105 106 107 108 </script>Enlace
El enlace para compartir es: