Edit in JSFiddle

html, body { background: #eee; width: 100%; height: 100%; }

.thing {
  position: absolute; top: 60px; left: 100px;  
    
  width: 16px; height: 16px;
    
  font-size: 32px; line-height: 16px;
  color: #666; text-shadow: 0 1px 1px white;
 
  transition: top 250ms ease-in,left 250ms ease-in-out;
 
  -webkit-transition: top 250ms ease-in,left 250ms ease-in-out;
  -moz-transition: top 250ms ease-in,left 250ms ease-in-out;
  -ms-transition: top 250ms ease-in,left 250ms ease-in-out;
  -o-transition: top 250ms ease-in,left 250ms ease-in-out;
   
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
    
  cursor: pointer;    
}

$(function () {
    
$("body").click( function(e) {
    console.log(e);
    $(".thing").css({
        left: e.offsetX,
        top : e.offsetY
    });
});
    
});

<span class="thing">♛</span>