Javascript 我试图将图像上传到面板中，但如何拖动&；将图像放入面板？

我试图将图像上传到面板中，但它在面板中可见，但如何将图像拖动到面板中？有人能帮我吗

HTML:

---

工作正常，但如何将图像拖放到此面板中？

可能是“谢谢你，帕特里克！”！这很好，但是如何将图像检索到此div中呢？

<div class="imgUpload">
<input type="file" accept="im/*" onchange="loadFile(event)">
<img id="output" src="img/placeholder.png">
<span class="changeTxt">Change<i class="fa fa-camera"></i></span>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };


    $('#output').attr('src', 'img/placeholder.png').css({
      width:'100%',
      height:'100%'
      });

.imgUpload input {
position: absolute;
bottom: 0;
width: 100%;
z-index:1000;
opacity:0.0;
cursor:pointer;
}
.imgUpload {
border: 1px solid #d9d9d9;
padding: 5px;
width: 350px;
height: 150px;
position: relative;
    }
.imgUpload img {
    display:block;
    max-width:100%;
}
.changeTxt {
    position:absolute;
    bottom:0;
    display:block;
    width:100%;
    color:#fff;
    left:0;
    padding-top:3px;
    padding-bottom:3px;
    z-index:100;
    text-indent:5px
    }
.changeTxt:after {
    background-color: #000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    content: '';
    position: absolute;
    z-index: -1;
    }
.changeTxt .fa-camera {
    position: absolute;
    right: 5px;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 60%;
}