ReactJS : How to restrict user to drag their Signature outisde specified placeholder

WebViewer Version: 8.3.1

We are using PDFTron SDK in our reactjs Application and trying to create the signing app. We create the placeholder for signature and other user needs to sign on specified placeholder.

Currently user able to sign the document on clicking of placeholder (Sign here SignatureWidgetAnnotation) , but we want to user should not able to drag their signature outside specified placeholder (Sign here SignatureWidgetAnnotation).

Please help us on this . Thanks in advance

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:



You can do this by listening to the annotationChanged event and turning on the NoMove property on the newly created signature. Although the changed annotation is created through the event, you may not know whether the signature annotation was created for the widget or by itself through the event. So, I would recommend looping through the widgets and checking the annot property for the signature as that will be the associated signature for that widget.

const { annotationManager, Annotations } = instance.Core.
annotationManager.addEventListener('annotationChanged', () => {
  annotationManager.getAnnotationsList().forEach(annot => {
    if (annot instanceof Annotations.SignatureWidgetAnnotation && annot.annot) {
      annot.annot.NoMove = true;

Let me know if this helps!

@Andy_Huang IN attached picture you can see that there is a placeholder and signature. We want to disable the dragging of signature image

The code I provided should work as it does not stop the widget from moving. It loops through the annotation list to find signature widgets and gets the associated signature annotation if it exists. Then it sets NoMove to true on it.

1 Like

Thanks for quick response @Andy_Huang It’s my bad. Your solution working fine. :innocent: