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