Untitled

dabblet.css

.over {
  border: 2px dashed #000;
  width:200px;
  heigt:200px;
  display:block;
}

dabblet.html

<div id="column">
  <div class="over" draggable="true"><header>A</header></div>
  <div class="over" draggable="true"><header>B</header></div>
  <div class="over" draggable="true"><header>C</header></div>
</div>

<script>



function handleDragStart(e) {
  this.style.opacity = '0.4';  // this / e.target is the source node.
}

function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault(); // Necessary. Allows us to drop.
  }

  e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.

  return false;
}

function handleDragEnter(e) {
  // this / e.target is the current hover target.
  this.classList.add('over');
}

function handleDragLeave(e) {
  //this.classList.remove('over');  // this / e.target is previous target element.
  alert("handleDragLeave");
}

var cols = document.querySelectorAll('#columns .column');
[].forEach.call(cols, function(col) {
  col.addEventListener('dragstart', handleDragStart, false);
  col.addEventListener('dragenter', handleDragEnter, false);
  col.addEventListener('dragover', handleDragOver, false);
  col.addEventListener('dragleave', handleDragLeave, false);
});

</script>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}