DiegoTc/jsbin.cagiv.css

## jsbin.cagiv.css
/* Prevent the text contents of draggable elements from being selectable. */
[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}
.test{
  height: 150px;
  width: 150px;
  cursor: move;
}

.test.over {
  border: 2px dashed #000;
}

body{
    font-family: 'Segoe UI';
    font-size: 12pt;
}

header h1{
    font-size:12pt;
    color: #fff;
    background-color: #1BA1E2;
    padding: 20px;

}
article
{
    width: 80%;
    margin:auto;
    margin-top:10px;
}


.thumbnail{

    height: 100px;
    margin: 10px;
}

#div1{
 width:500px;
 height:450px;
 padding:10px;
 border:1px solid #aaaaaa;
 background: url(http://config.myron.com/configurator_images/product_small/MY/NWBANNER1375~NULL0001_FRONTCOVER.png);
}

#result{
 width:300px;
 height:300px;
 padding:10px;
 border:1px solid #aaaaaa;
}


## jsbin.cagiv.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]" />
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="row">
  <div class="col-md-4">
    <header>
        <h1>File API - FileReader</h1>
    </header>
    <article>
        <label for="files">Select multiple files: </label>
        <input id="files" type="file" multiple/>
        <output id="result" />
    </article>
  </div>
  <div class="col-md-8">
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  </div>
</div>


</body>
</html>

## jsbin.cagiv.js
var counter = {value:0};
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
    var id=ev.target.id;
    dragSrcEl = this;
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    var cpydata = document.getElementById(data);
    cpydataElement = cpydata.cloneNode(true);
    var columnId = document.getElementById("column");
    cpydataElement.removeAttribute("id");
    cpydataElement.className="";
    ev.target.appendChild(cpydataElement);
}


window.onload = function(){

    //Check File API support
    if(window.File && window.FileList && window.FileReader)
    {
        var filesInput = document.getElementById("files");

        filesInput.addEventListener("change", function(event){

            var files = event.target.files; //FileList object
            var output = document.getElementById("result");
            for(var i = 0; i< files.length; i++)
            {
                var file = files[i];

                //Only pics
                if(!file.type.match('image'))
                  continue;

                var picReader = new FileReader();

                picReader.addEventListener("load",function(event){

                    var picFile = event.target;

                    var div = document.createElement("div");
                    var id = "drag"+counter.value;
                    counter.value=counter.value+1;
                    div.innerHTML = "<img id="+id + " class='test' draggable='true' ondragstart='drag(event)' src='" + picFile.result + "'" +
                            "title='" + picFile.name + "'/>";

                    output.insertBefore(div,null);

                });

                 //Read the image
                picReader.readAsDataURL(file);
            }


        });
    }
    else
    {
        console.log("Your browser does not support File API");
    }
};
	/* Prevent the text contents of draggable elements from being selectable. */
	[draggable] {
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	/* Required to make elements draggable in old WebKit */
	-khtml-user-drag: element;
	-webkit-user-drag: element;
	}
	.test{
	height: 150px;
	width: 150px;
	cursor: move;
	}

	.test.over {
	border: 2px dashed #000;
	}

	body{
	font-family: 'Segoe UI';
	font-size: 12pt;
	}

	header h1{
	font-size:12pt;
	color: #fff;
	background-color: #1BA1E2;
	padding: 20px;

	}
	article
	{
	width: 80%;
	margin:auto;
	margin-top:10px;
	}


	.thumbnail{

	height: 100px;
	margin: 10px;
	}

	#div1{
	width:500px;
	height:450px;
	padding:10px;
	border:1px solid #aaaaaa;
	background: url(http://config.myron.com/configurator_images/product_small/MY/NWBANNER1375~NULL0001_FRONTCOVER.png);
	}

	#result{
	width:300px;
	height:300px;
	padding:10px;
	border:1px solid #aaaaaa;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="[add your bin description]" />
	<script src="//code.jquery.com/jquery.min.js"></script>
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<div class="row">
	<div class="col-md-4">
	<header>
	<h1>File API - FileReader</h1>
	</header>
	<article>
	<label for="files">Select multiple files: </label>
	<input id="files" type="file" multiple/>
	<output id="result" />
	</article>
	</div>
	<div class="col-md-8">
	<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
	</div>
	</div>


	</body>
	</html>
	var counter = {value:0};
	function allowDrop(ev) {
	ev.preventDefault();
	}

	function drag(ev) {
	ev.dataTransfer.setData("Text", ev.target.id);
	var id=ev.target.id;
	dragSrcEl = this;
	}

	function drop(ev) {
	ev.preventDefault();
	var data = ev.dataTransfer.getData("Text");
	var cpydata = document.getElementById(data);
	cpydataElement = cpydata.cloneNode(true);
	var columnId = document.getElementById("column");
	cpydataElement.removeAttribute("id");
	cpydataElement.className="";
	ev.target.appendChild(cpydataElement);
	}


	window.onload = function(){

	//Check File API support
	if(window.File && window.FileList && window.FileReader)
	{
	var filesInput = document.getElementById("files");

	filesInput.addEventListener("change", function(event){

	var files = event.target.files; //FileList object
	var output = document.getElementById("result");
	for(var i = 0; i< files.length; i++)
	{
	var file = files[i];

	//Only pics
	if(!file.type.match('image'))
	continue;

	var picReader = new FileReader();

	picReader.addEventListener("load",function(event){

	var picFile = event.target;

	var div = document.createElement("div");
	var id = "drag"+counter.value;
	counter.value=counter.value+1;
	div.innerHTML = "<img id="+id + " class='test' draggable='true' ondragstart='drag(event)' src='" + picFile.result + "'" +
	"title='" + picFile.name + "'/>";

	output.insertBefore(div,null);

	});

	//Read the image
	picReader.readAsDataURL(file);
	}



	});
	}
	else
	{
	console.log("Your browser does not support File API");
	}
	};