title: Drag and drop predefined object into document viewer
body: <p>I would like to make an angular page that will do the following:</p>
  <ol>
  <li>allow user to upload a document (not an issue)</li>
  <li>display the content of the document</li>
  <li>allow the user to drag a predefined object into the document display section to specify the location at which they will sign for example.</li>
  <li>a button when clicked, it will retrieve the coordinates of the predefined object with respect to the document location. so that no matter how big the screen is or how small it is, it will always give the same coordinate if located at the same location with respect to the document.</li>
  </ol>
  <p>I don't need a full solution. I need someone to point me at the right direction. I tried to search online but i didn't get anything. maybe i am using wrong terminology.</p>
  <p>for now, the document type will be either word or pdf. it would be great if someone can suggest a library.</p>
  <p>Thanks in advance</p>
  <p><a href="https://i.stack.imgur.com/e9hKf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e9hKf.png" alt="enter image description here" /></a></p>