• HTML
• CSS
• JS

HTML

<div class="contenedor">
    <div class="imagenes" id="imagenes">
        <img id="imagen" src="https://compositu.com/template/web/img/extra/user_1.png">
    </div>
    <div class="caja" id="caja">
        Arrastre y suelte la imagen aquí
    </div>
</div>

CSS

.contenedor{
    display:flex;
}
.imagenes>img{
    width:150px;
    height:150px;
    border:1px solid #999;
    margin-right:0.5rem;
}
.caja{
    width:300px;
    height:300px;
    border:2px dotted #999;
    padding:5px;
}

JS

function iniciar(){
    
    //origen
    origen = document.getElementById('imagen');
    origen.addEventListener('dragstart', arrastrado, false);
    
    //destino
    destino = document.getElementById('caja');
    destino.addEventListener('dragenter' ,function(e){ e.preventDefault(); });
    destino.addEventListener('dragover' ,function(e){ e.preventDefault(); });
    destino.addEventListener('drop' ,soltado,false);
    
}
function arrastrado(e){
    var codigo = '<img src="'+origen.getAttribute('src')+'">';
    e.dataTransfer.setData('Text', codigo);
}
function soltado(e){
    e.preventDefault();
    destino.innerHTML = e.dataTransfer.getData('Text');
}

window.addEventListener('load', iniciar, false);