No al cierre de webs
ShareCode
Permalink: http://www.treeweb.es/u/974/ 01/02/2011

ShareCode

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: