Gracias, Wikipedia.
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  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>


Este ShareCode tiene versiones:
  1. Drag and Drop A B C ... (23/10/2012)
Enlace
El enlace para compartir es: