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 e.preventDefault();41 e.stopPropagation();42 log('DragOver '+this.innerHTML);43 return false;44 }45 46 function handleDragEnter(event) {47 //log('DragEnter '+this.innerHTML);48 }49 50 function handleDragLeave(e) {51 //log('DragLeave'+this.innerHTML);52 }53 54 function handleDrop(event) {55 // this / e.target is current target element.56 event.preventDefault();57 event.stopPropagation();58 log('Drop '+this.innerHTML);59 60 var s = '';61 for (key in event.dataTransfer.files[0]) {62 s += key+'='+event.dataTransfer.files[0][key]+'<br>';63 }64 log (s);65 66 var object_source = document.getElementById(event.dataTransfer.getData('Text'));67 object_source.style.borderColor = 'red';68 69 70 71 if(this.offsetTop>object_source.offsetTop) {72 this.parentNode.insertBefore(object_source, this.nextSibling);73 } else {74 this.parentNode.insertBefore(object_source, this);75 }76 77 78 79 80 81 return false;82 }83 84 var origen = null;85 86 function handleDragEnd(e) {87 // this/e.target is the source node.88 log('DragEnd '+this.innerHTML);89 this.style.color = '';90 }91 92 93 for (key in list_draggable) {94 list_draggable[key].addEventListener('dragover', handleDragOver, false);95 list_draggable[key].addEventListener('dragenter', handleDragEnter, false);96 list_draggable[key].addEventListener('dragleave', handleDragLeave, false);97 list_draggable[key].addEventListener('drop', handleDrop, false);98 list_draggable[key].addEventListener('dragend', handleDragEnd, false);99 list_draggable[key].addEventListener('dragstart', handleDragStart, false);100 }101 102 103 104 105 </script>Enlace
El enlace para compartir es: