How to make drag to a picture in that division? - html

Question

I have this sample:
link
CODE HTML:
<div class="border">
<div id="i-choose">
<input type="file" name="file" id="file" class="inputfile">
<label for="file">Browse</label>
</div>
</div>
CODE CSS:
#i-choose {
float: left;
font-size: 17pt;
}
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;}
#i-choose label {
line-height: 0px;
font-size: 17pt;
margin-top: 12px;
height: auto;
color: #0096BD;
margin-left: 5px;
cursor: pointer;}
.border{
border:1px dashed grey;
overflow:hidden;
}
Basically what I want to do is shoot an image in the div and to be drop.
I put a picture more clearly understand.
How can I solve this problem? Does anyone have any idea?
Thanks in advance!

Answer 1

Please take a look at the sample JS code below:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
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));
}
$("#file").change(function () {
readURL(this);
});
CSS:
#div1 {
border: 1px solid #aaaaaa;
padding: 10px;
min-height:70px;
width: 350px;
}
#i-choose {
float: left;
font-size: 17pt;
}
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
#i-choose label {
line-height: 0px;
font-size: 17pt;
margin-top: 12px;
height: auto;
color: #0096BD;
margin-left: 5px;
cursor: pointer;
}
.border {
border:1px dashed grey;
overflow:hidden;
}
and the associated HTML :
<form id="form1" runat="server">
<div class="border">
<div id="i-choose">
<input type='file' id="file" name="file" class="inputfile" />
<label for="file">Browse</label>
<img id="blah" src="#" alt="" draggable="true" ondragstart="drag(event)" />
</div>
</div>
JsFiddle