billrichards/basic drag and drop with vanilla javascript

## basic drag and drop with vanilla javascript
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
background-color:#daaaaa;
}
.bright1 {background-color:green;}
.bright2 {background-color:blue;}
.bright3 {background-color:orange;}
.neutral1 {background-color:#cacaca;}
.neutral2 {background-color:#dadada;}
.title {color:black;}
.rectangle {
color:white;
border-radius:5px;
margin: 1% 1% 1% 1%;
min-height:20px;
min-width:75px;
text-align:center;
}

.column {
float:left;
margin: 1% 1% 1% 1%;
padding: 1% 1% 1% 1%;
min-height:80px;
min-width:80px;
border-width:2px;
border-style:dotted;
}
.stack {
float:left;
clear:left;
}

</style>
<script type='text/javascript'>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text/html", ev.target.id);
}

function drop(ev) {

    ev.preventDefault();
    var data = ev.dataTransfer.getData("text/html");
    if(hasClass(ev.target,'nodrop')) {
       // if dropped inside a rectangle or title div, instead append to the parentNode
       ev.target.parentNode.appendChild(document.getElementById(data));
       var droptarget = ev.target.parentNode.getAttribute('id');
    } else {
       ev.target.appendChild(document.getElementById(data));
       var droptarget = ev.target.getAttribute('id');
    }

   // update form elements with the dragged data.
   mylist = document.getElementById('mylist');
   if(droptarget == 'col1' && valueExists(mylist,document.getElementById(data).innerHTML + ';')) {
      mylist.value = mylist.value.replace(document.getElementById(data).innerHTML + ';','');
   } else if(droptarget == 'col2' && !valueExists(mylist,document.getElementById(data).innerHTML + ';')) {
      mylist.value = mylist.value + document.getElementById(data).innerHTML + ';';
   }
}

function valueExists(el,val) {
  return el.value.search(val) > -1;
}
function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

function update() {
if(document.getElementById('mylist').value != '') {
    document.getElementById("msg").innerHTML = "Pretend something happened with ajax.  Like maybe you just posted <strong>" + document.getElementById('mylist').value + "</strong> to a page that does good stuff with it.";
} else {
    document.getElementById("msg").innerHTML = ' drag some elements first.';
}
}
</script>
</head>
<body>
<div id='col1' class='column neutral1' ondragover='allowDrop(event)' ondrop='drop(event)'>
   <div class='title stack nodrop' draggable='false' onmousedown='event.preventDefault()'>options</div>
  <div id='name' class='bright1 rectangle stack nodrop' draggable='true' ondragstart="drag(event)">NAME</div>
  <div id='number' class='bright2 rectangle stack nodrop' draggable='true' ondragstart="drag(event)">NUMBER</div>
  <div id='desc' class='bright3 rectangle stack nodrop' draggable='true' ondragstart="drag(event)">DESC</div>
</div>
<div id='col2' class='column neutral2' ondragover='allowDrop(event)' ondrop='drop(event)'>
  <div class='title stack nodrop'  draggable='false' onmousedown='event.preventDefault()'>choices</div>
</div>
<input type='hidden' value='' id='mylist' name='mylist' />
<input class='stack' type='submit' value='submit!' name='submit' onclick='update()')/>
<div class='stack' id='msg'></div>
</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<style>
	body {
	background-color:#daaaaa;
	}
	.bright1 {background-color:green;}
	.bright2 {background-color:blue;}
	.bright3 {background-color:orange;}
	.neutral1 {background-color:#cacaca;}
	.neutral2 {background-color:#dadada;}
	.title {color:black;}
	.rectangle {
	color:white;
	border-radius:5px;
	margin: 1% 1% 1% 1%;
	min-height:20px;
	min-width:75px;
	text-align:center;
	}

	.column {
	float:left;
	margin: 1% 1% 1% 1%;
	padding: 1% 1% 1% 1%;
	min-height:80px;
	min-width:80px;
	border-width:2px;
	border-style:dotted;
	}
	.stack {
	float:left;
	clear:left;
	}

	</style>
	<script type='text/javascript'>
	function allowDrop(ev) {
	ev.preventDefault();
	}

	function drag(ev) {
	ev.dataTransfer.setData("text/html", ev.target.id);
	}

	function drop(ev) {

	ev.preventDefault();
	var data = ev.dataTransfer.getData("text/html");
	if(hasClass(ev.target,'nodrop')) {
	// if dropped inside a rectangle or title div, instead append to the parentNode
	ev.target.parentNode.appendChild(document.getElementById(data));
	var droptarget = ev.target.parentNode.getAttribute('id');
	} else {
	ev.target.appendChild(document.getElementById(data));
	var droptarget = ev.target.getAttribute('id');
	}

	// update form elements with the dragged data.
	mylist = document.getElementById('mylist');
	if(droptarget == 'col1' && valueExists(mylist,document.getElementById(data).innerHTML + ';')) {
	mylist.value = mylist.value.replace(document.getElementById(data).innerHTML + ';','');
	} else if(droptarget == 'col2' && !valueExists(mylist,document.getElementById(data).innerHTML + ';')) {
	mylist.value = mylist.value + document.getElementById(data).innerHTML + ';';
	}
	}

	function valueExists(el,val) {
	return el.value.search(val) > -1;
	}
	function hasClass(element, cls) {
	return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
	}

	function update() {
	if(document.getElementById('mylist').value != '') {
	document.getElementById("msg").innerHTML = "Pretend something happened with ajax. Like maybe you just posted <strong>" + document.getElementById('mylist').value + "</strong> to a page that does good stuff with it.";
	} else {
	document.getElementById("msg").innerHTML = ' drag some elements first.';
	}
	}
	</script>
	</head>
	<body>
	<div id='col1' class='column neutral1' ondragover='allowDrop(event)' ondrop='drop(event)'>
	<div class='title stack nodrop' draggable='false' onmousedown='event.preventDefault()'>options</div>
	<div id='name' class='bright1 rectangle stack nodrop' draggable='true' ondragstart="drag(event)">NAME</div>
	<div id='number' class='bright2 rectangle stack nodrop' draggable='true' ondragstart="drag(event)">NUMBER</div>
	<div id='desc' class='bright3 rectangle stack nodrop' draggable='true' ondragstart="drag(event)">DESC</div>
	</div>
	<div id='col2' class='column neutral2' ondragover='allowDrop(event)' ondrop='drop(event)'>
	<div class='title stack nodrop' draggable='false' onmousedown='event.preventDefault()'>choices</div>
	</div>
	<input type='hidden' value='' id='mylist' name='mylist' />
	<input class='stack' type='submit' value='submit!' name='submit' onclick='update()')/>
	<div class='stack' id='msg'></div>
	</body>
	</html>