How to drag placeholders onto a PDF

Question

I'm really curious as to how sites like RightSignature and PandaDoc provide the drag and drop capability on a PDF. Basically, you upload a PDF to their site, then they display the PDF in a window (all the pages -- scrollable), then they have a panel on the side of the PDF viewer that has one to many form fields in it and the site allows you to drag those fields onto the PDF as placeholders.

I get that they are basically just recording the X/Y coordinates of where the form element is being placed. But how do are they actually accomplishing this from a technical perspective?

I know how to handle the PDF upload. I just don't know how to display the PDF and basically create an overlay that allows the user to drag fields onto it and record the x,y coordinates. This way when I want to create a version of that template, I know where to put the fields on the PDF.

Answer 1

Even if this question is quite old, I share my solution realized using the following libraries:

• pdf.js (that renders a PDF file as an HTML component allowing the capturing of coordinates)
• interact.js (for the drag and drop of placeholders)

Check my solution pushed to GitHub https://github.com/ValerioEmanuele/drag-and-drop-placeholders-into-PDF