Drag and Drop Exercise

Basic exercise for drag and drop.

by Matthew Day

HTML

<div id="container">
  <div id="box"></div>
  <div id="pic" draggable="true">
    <img src="http://samuraijane.net/dev/img/anne.jpg" />
  </div>
</div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#container {
  text-align: center;
}
#box {
  border:1px solid #ccc;
  display: inline-block;
  height:204px;
  margin: 20px 0;
  vertical-align: middle;
  width:204px;
 }
 #box:-moz-drag-over {
   border: 1px solid crimson;
 }
 #pic {

 }
 img {
   height: auto;
   width: 100px;
 }

JavaScript

function dragMe() {
	var myPic = document.getElementById('pic');
  myPic.addEventListener('dragstart', dragStart, false);
  // var myBox = document.getElementById('box');
  // myBox.addEventListener( 'dragcenter', draggedCenter, false );
  // myBox.addEventListener( 'dragover', draggedOver, false )
  // myBox.addEventListener( 'drop', dropped, false );
}

function dragStart(e){
    // var target = getElementById('box');
    // e.dataTransfer.setData('text/html', target);
    console.log('Drag initiated');
}
/*
function draggedCenter(e) {
	e.preventDefault();
}

function draggedOver(e) {
	e.preventDefault();
}

function dropped(e) {
	e.preventDefault();
}
*/
dragMe();