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  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>


Este ShareCode tiene versiones:
  1. Drag and Drop A B C ... (04/09/2011)
  2. Drag and Drop A B C ... (28/03/2013)
  3. Drag and Drop A B C ... (24/04/2013)
  4. Drag and Drop A B C ... (24/04/2013)
  5. Drag and Drop A B C ... (24/04/2013)
  6. Drag and Drop A B C ... (24/04/2013)
  7. Drag and Drop A B C ... (24/04/2013)
Enlace
El enlace para compartir es:

Powered by TreeWeb
© TreeWeb 2010. Todos los derechos reservados