$(function(){
var nomeSelecionado="";
$(".nome").on("dragstart",function(e){
nomeSelecionado=$(this).html();
//alert(nomeSelecionado);
});
$("#contrato").on("dragover",function(e){
if(nomeSelecionado){
var valor=$(this).val().split("{nome}").join(nomeSelecionado);
$(this).val(valor);
nomeSelecionado="";
e.preventDefault();
}
});
});
#linha{
display:flex;
flex-flow: row;
}
#contrato{
width:400px;
height: 800px;
flex-grow:1;
}
#nomes{
padding: 20px;
display: flex;
flex-flow: column;
}
#nomes .nome{
display:block;
padding: 5px;
border-radius: 3px;
background-color: #eaeaea;
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="linha">
<textarea id="contrato">
Bom dia Sr. {nome}
Lorem {nome} dolor sit amet, consectetur adipiscing elit. Pellentesque auctor ex eu leo scelerisque, vitae pharetra risus efficitur. Mauris tempus vestibulum diam, non condimentum est vestibulum eu. Suspendisse sit amet pellentesque metus, quis malesuada eros. Integer pretium sapien vel semper {nome}. Curabitur nec venenatis nunc. Nullam sagittis tortor nisi, non dictum sem faucibus in. Vestibulum porta sem nec massa pulvinar faucibus. Nam ipsum quam, pellentesque vitae fermentum sed, efficitur sit amet ipsum. Quisque maximus euismod mi in tincidunt. Nam placerat, odio et euismod rhoncus, ligula risus laoreet nunc, sed sagittis ex turpis eu turpis. Maecenas aliquam est tortor. Quisque placerat accumsan scelerisque. Sed nec faucibus risus. Ut nulla justo, laoreet ac pulvinar et, dignissim et sapien.
Phasellus imperdiet dolor tortor, eu faucibus mi malesuada eu. Nulla efficitur faucibus lacus, condimentum aliquam nisl porttitor ac. Sed convallis imperdiet risus, eget imperdiet leo commodo nec. Nullam sit amet massa ac justo iaculis tincidunt et aliquam nisl. Sed dictum efficitur sapien, eu maximus nibh interdum vel. In ut orci a dui hendrerit iaculis. Quisque sit amet enim in dui blandit ornare. Donec eu aliquam nulla.
In odio lorem, mollis vel nisl non, convallis sagittis eros. Etiam nec commodo augue, sit amet laoreet quam. Ut scelerisque cursus leo eget fringilla. Sed odio enim, consequat a justo eget, dignissim consequat purus. Etiam cursus, ligula non imperdiet placerat, risus nisl condimentum elit, quis sagittis risus est feugiat purus. Quisque nec augue vel ex finibus dictum. Vivamus varius tortor nunc, malesuada rhoncus risus tristique id. Vivamus at ligula feugiat, ultricies magna id, feugiat nisl.
Phasellus varius velit turpis, nec interdum eros feugiat eget. Pellentesque eget velit vitae arcu rutrum faucibus. In tincidunt, diam ac semper consequat, metus purus vulputate enim, at convallis lacus augue sit amet arcu. Aenean pretium urna eu auctor eleifend. Pellentesque posuere est sit amet sagittis feugiat. Maecenas ornare neque sapien, quis consequat orci vestibulum et. Ut malesuada massa vel sapien interdum, dignissim hendrerit mauris pulvinar. Cras neque ante, tincidunt gravida risus id, venenatis gravida magna. Vivamus auctor, orci vel finibus pulvinar, ex magna convallis justo, non auctor lacus sem et turpis. Nulla quis odio vel urna fringilla pellentesque at vel dui. Quisque lectus nibh, bibendum in porta vitae, suscipit sit amet odio. Quisque ultricies libero erat. Duis auctor purus ut justo maximus, eu ultrices ex ullamcorper.
Aliquam venenatis mollis semper. Pellentesque sagittis aliquam massa vitae auctor. Morbi sed massa sed tortor feugiat facilisis in nec lorem. Etiam cursus, libero eget viverra laoreet, lacus diam pretium quam, vestibulum gravida justo tortor sed lacus. In sed leo in quam pretium luctus. Quisque eu fermentum lacus. Cras diam diam, pharetra nec neque venenatis, ultricies volutpat metus. Cras mattis eget turpis sit amet blandit. Nam commodo dui sed finibus ullamcorper. Nam aliquam, ligula nec laoreet auctor, mi massa interdum justo, non bibendum tellus massa in magna. Pellentesque finibus, sapien quis fringilla venenatis, sapien erat gravida augue, sit amet dictum ipsum sapien vitae massa. Donec tincidunt vehicula augue ut gravida. Sed in porttitor enim. Proin vitae tincidunt orci. Nunc ac nulla arcu.</textarea>
<div id="nomes">
<span class="nome" draggable="true">Pedro</span>
<span class="nome" draggable="true">Paulo</span>
<span class="nome" draggable="true">Maria</span>
<span class="nome" draggable="true">Joana</span>
</div>
</div>