indie-rok/dragAndDrop.html

## dragAndDrop.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Drag</title>
    <style>
      .destiny{
        width: 130px;
        height: 130px;
        border: 1px solid black;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <img src="http://dummyimage.com/100x100" alt="1" id="1" class="test" draggable="true">
    <br>
    <div class="destiny" id="des-1"></div>

    <script>
    function handleDragStart() {
      this.style.opacity = '0.4';  // this / e.target is the source node.
      event.dataTransfer.setData("perrito",event.target.id);
    }

    function handleDragOver(){
      event.preventDefault();
    }

    function drop(){
      var idDeDrag = event.dataTransfer.getData("perrito");
      event.target.appendChild(document.getElementById(idDeDrag));
    }


    var cols = document.getElementsByClassName("test");
    [].forEach.call(cols, function(col) {
      col.addEventListener('dragstart', handleDragStart);
    });

    var destinys = document.getElementsByClassName("destiny");
    [].forEach.call(destinys, function(destiny) {
      destiny.addEventListener('dragover', handleDragOver);
      destiny.addEventListener('drop', drop);
    });

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Drag</title>
	<style>
	.destiny{
	width: 130px;
	height: 130px;
	border: 1px solid black;
	display: inline-block;
	}
	</style>
	</head>
	<body>
	<img src="http://dummyimage.com/100x100" alt="1" id="1" class="test" draggable="true">
	<br>
	<div class="destiny" id="des-1"></div>

	<script>
	function handleDragStart() {
	this.style.opacity = '0.4'; // this / e.target is the source node.
	event.dataTransfer.setData("perrito",event.target.id);
	}

	function handleDragOver(){
	event.preventDefault();
	}

	function drop(){
	var idDeDrag = event.dataTransfer.getData("perrito");
	event.target.appendChild(document.getElementById(idDeDrag));
	}


	var cols = document.getElementsByClassName("test");
	[].forEach.call(cols, function(col) {
	col.addEventListener('dragstart', handleDragStart);
	});

	var destinys = document.getElementsByClassName("destiny");
	[].forEach.call(destinys, function(destiny) {
	destiny.addEventListener('dragover', handleDragOver);
	destiny.addEventListener('drop', drop);
	});

	</script>
	</body>
	</html>