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.

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.

• javascript
• jquery
• pdf
• pandadoc

• 1 You can use JavaScript to make the drag/drop functionality no problem. JQuery makes pretty easy, actually. Once the user drags things on to your 'canvas' they would basically click a button to 'save' their layout. You would then use that event handler to capture what they did and do whatever you want with it. – mwilson Commented Aug 11, 2015 at 2:47
• Did you ever find a solution? – nullable Commented Feb 4, 2017 at 18:30

1 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