2

Estou tentando adicionar tags numa foto (como o sistema de identificação do facebook), o erro que estou a ter é o seguinte:

Quando clico numa imagem para colocar as tags o formulário primeiro surge no canto do meu computador, não nas coordenadas da imagem. já trabalhei com estas funções e mesmo assim não funciona inserir a descrição da imagem aqui

  $('body .jcontent').on('click', '.imgpost', function(e){
       var imgvalue = $(this).parent();
       valueX = e.pageX //- $(imgvalue).offset().left;
       valueY = e.pageY //- $(imgvalue).offset().top;
       var idimg = this.id;
       $('#tagit').css({top:valueY,left:valueX})
       $(imgvalue).append('<div id="tagit"><div class="box"></div><div class="name"><input type="text" name="txtname" class="w3-input" id="tagname" placeholder="Comente..." /><input type="button" name="w3-btn" value="Save" id="btnsave" /><input type="button" name="btncancel" value="Cancel" id="btncancel" /></div></div>');
       $('#tagname').focus(); //puts the cursor inside text-field

})
2
  • 1
    tenta fazer o teu DIV em que a imagem está inserida como position relative, se isso não funcionar seria bom ter o teu código no Plunker pra podermos ajudar a solucionar Commented 19/05/2016 às 6:47
  • Você já atribuiu $(this).parent() à variável, então ao invés de $(imgvalue).append('...'); veja se imgvalue.append('...'); pode resolver o problema. Commented 9/06/2016 às 18:05

1 Resposta 1

0

Você pode fazer com uma div relative e a da tag fica absolute, assim ela pode ser flutuante dentro da div relative, que no caso seria a imagem.

No seu código está informando o top e o left antes do elemento existir, você tem que adicionar o elemento html primeiro e depois informar qual é a posição.

Aqui com base no seu código: https://jsfiddle.net/0888bdev/2/

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 .