lduboeuf/gist:b3fccd35e36d2bf30309

## gistfile1.js
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>

<style>
#error_message {
	color: red;
}

#appender {
	background-color: #CCCCCC;
}

#remover {
	background-color: red;
}


#remover, #appender {
text-align: center;
	display: inline-block;
	width:50px;
	height: 50px;
	font-size: 3em;
}

#div1 {width:350px;height:250px;padding:10px;border:1px solid #aaaaaa;}

</style>
<script>

	var msg = document.getElementById("error_message");

	//default video div is hidden
	//document.getElementById("video").style.visibility = "hidden";

	function allowDrop(ev) {
    	ev.preventDefault();
	}

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

	function drop(ev) {
	    ev.preventDefault();
	    var data = ev.dataTransfer.getData("text");
	    ev.target.appendChild(document.getElementById(data));
	}


	function display_info(){
		//document.getElementById("video").style.visibility = "visible";
		document.getElementById("info").value = "kikou";
		document.getElementById("error_message").innerHTML = "oulala, ça plantouille là!";
	}


	function add_info(){

		var p = document.createElement("p");
		p.innerHTML = "oulalalalalalala!";
		document.getElementById("display").appendChild(p);

	}

	function remove_info(){
		var d = document.getElementById("display");
		if (d!="undefined")
			d.removeChild(d.lastChild);
	}


	function setupListeners(){
		document.getElementById("btnOK").addEventListener('click', display_info, false);
		document.getElementById("appender").addEventListener('mouseover', add_info, false);
		document.getElementById("remover").addEventListener('mouseover', remove_info, false);
		window.addEventListener("keydown", function(e){
			console.log(e.keyCode);
			if (e.keyCode==46){

				remove_info();
			}

		}, true);
	}


	window.addEventListener("load", function(){

		document.getElementById("btnOK").addEventListener('click', display_info, false);
		document.getElementById("appender").addEventListener('mouseover', add_info, false);
		document.getElementById("remover").addEventListener('mouseover', remove_info, false);
		window.addEventListener("keydown", function(e){
			console.log(e.keyCode);
			if (e.keyCode==46){

				remove_info();
			}

		}, true);


	}, false);


</script>

</head>
<body>


<input type="text" id="info" placeholder="rien du tout" value=""/>
<input type="button" id="btnOK" value="ok"/>

<p id="error_message">
</p>

<div id="appender">
+
</div>
<div id="remover">
-
</div>

<div id="display">
</div>


<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img/cochon.jpg" draggable="true" ondragstart="drag(event)">

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="ISO-8859-1">
	<title>Insert title here</title>

	<style>
	#error_message {
	color: red;
	}

	#appender {
	background-color: #CCCCCC;
	}

	#remover {
	background-color: red;
	}


	#remover, #appender {
	text-align: center;
	display: inline-block;
	width:50px;
	height: 50px;
	font-size: 3em;
	}

	#div1 {width:350px;height:250px;padding:10px;border:1px solid #aaaaaa;}

	</style>
	<script>

	var msg = document.getElementById("error_message");

	//default video div is hidden
	//document.getElementById("video").style.visibility = "hidden";

	function allowDrop(ev) {
	ev.preventDefault();
	}

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

	function drop(ev) {
	ev.preventDefault();
	var data = ev.dataTransfer.getData("text");
	ev.target.appendChild(document.getElementById(data));
	}


	function display_info(){
	//document.getElementById("video").style.visibility = "visible";
	document.getElementById("info").value = "kikou";
	document.getElementById("error_message").innerHTML = "oulala, ça plantouille là!";
	}


	function add_info(){

	var p = document.createElement("p");
	p.innerHTML = "oulalalalalalala!";
	document.getElementById("display").appendChild(p);

	}

	function remove_info(){
	var d = document.getElementById("display");
	if (d!="undefined")
	d.removeChild(d.lastChild);
	}


	function setupListeners(){
	document.getElementById("btnOK").addEventListener('click', display_info, false);
	document.getElementById("appender").addEventListener('mouseover', add_info, false);
	document.getElementById("remover").addEventListener('mouseover', remove_info, false);
	window.addEventListener("keydown", function(e){
	console.log(e.keyCode);
	if (e.keyCode==46){

	remove_info();
	}

	}, true);
	}


	window.addEventListener("load", function(){

	document.getElementById("btnOK").addEventListener('click', display_info, false);
	document.getElementById("appender").addEventListener('mouseover', add_info, false);
	document.getElementById("remover").addEventListener('mouseover', remove_info, false);
	window.addEventListener("keydown", function(e){
	console.log(e.keyCode);
	if (e.keyCode==46){

	remove_info();
	}

	}, true);


	}, false);



	</script>

	</head>
	<body>




	<input type="text" id="info" placeholder="rien du tout" value=""/>
	<input type="button" id="btnOK" value="ok"/>

	<p id="error_message">
	</p>

	<div id="appender">
	+
	</div>
	<div id="remover">
	-
	</div>

	<div id="display">
	</div>


	<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

	<img id="drag1" src="img/cochon.jpg" draggable="true" ondragstart="drag(event)">

	</body>
	</html>