0

Gostaria de saber se é possível adicionar um contrato dentro de um textarea e definir alguns campos que podem ser alterados neste contrato.

Por exemplo: tenho {{nome}} {{endereco}}

quero possibilitar que o usuário consiga arrastar o nome ( que já tenho uma relação salva no banco de dados ) e um endereço ( que também tenho salvo) depois disso quero exportar estes dados para um docx.

4
  • Não ficou muito claro, tem como detalhar mais? Commented 30/05/2018 às 12:54
  • Tem sim Anderson. Preciso trazer um contrato que hoje sofre muitas alterações para nosso website. Só que determinados campos deste contrato, que hoje é editado em um documento word, preciso preencher dinamicamente. Seria como se eu adicionasse um texto dentro de uma textarea com variáveis que posso soltar valores dentro dela. Tipo: Este contrato pertence ao {nome}. Esta {nome} é uma marcação que se eu arrastar um dos nomes que tenho disponível em uma lista ele vai substitui-lo. Commented 30/05/2018 às 12:56
  • Para você fazer isso de arrastar e substituir você terá que usar um draggable, o jquery já tem isso jqueryui.com/draggable Commented 30/05/2018 às 13:03
  • Havia encontrado esta solução, mas não achei nenhum exemplo utilizando textarea, ou algo que dê para simular o que pretendo. Mesmo assim obrigado Anderson. Commented 30/05/2018 às 13:37

1 Resposta 1

1

Você pode usar os eventos dragstart e dragover em combinação com o jQuery para fazer isso, fiz um exemplo pra você.

Mas atenção: Este código é apenas uma referência, ele só troca o nome uma vez. (visto que ele substitui o coringa {nome})

$(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>
<div id="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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .