Adicionar e remover itens com mouse
Boa tarde, estou montando um marcador de foto, pois um cliente quer ele mesmo pontos de uma foto para colocar uma foto do detalhe.
Consegui criar a função de marcação da bolinha do local, não sei se está certinho, mas parece que sim, o problema é que quero colocar a função de remover mas não sei como.
Tipo fiz 3 pontos, mas quero remover 1, então quero clicar neste ponto e remover.
Segue o código que fiz:
<style>
#bolinha, #bolinha2{ padding:0.5em 0.75em; display: none; margin-left: -1.35%; margin-top: -1.35%; border:#900 0.1em solid; border-radius:5em; position:absolute; top:0em; left:0em; text-align:center; color:#FFF; z-index:5; font-size:1em; cursor: crosshair;}
#bolinha2{background-color:#639; cursor:pointer;}
</style>
<script src="<?=$URLcaminho;?>/js/jquery.js"></script>
<script>
$("html").mousemove(function(e){
$("#bolinha").show();
var vertical = e.pageY; //alert(altura);
var horizontal = e.pageX;
$("#meu_mouse").html('X: ' + e.pageX +', Y:'+ e.pageY);
$("#bolinha").css("top",""+vertical+"")
$("#bolinha").css("left",""+horizontal+"");
});
$("html").click(function(e){
var vertical = e.pageY; //alert(altura);
var horizontal = e.pageX;
adiciona_bolinha(vertical,horizontal);
});
//remover
$("div.#bolinha2").click( function(){$(this).remove();});
function adiciona_bolinha(vertical,horizontal){ //alert("top:"+vertical+";left:"+horizontal+"");
$("body").append("<div id='bolinha2' style='display: inline-block; top:"+vertical+";left:"+horizontal+";'>+</div>");
}
</script>
<body>
<div>Posicao do mouse: <div id="meu_mouse"> </div></div>
<div id="bolinha">+</div>
</body>Discussão (0)
Carregando comentários...