I'm sure it's something simple I'm missing, but I can't find a google or SO search that returns relevant results because of keyword overlap.

I've got the image of a form with lots of lines that I drag fields onto using cropper. It's complex and I lose track of where I am on the page, so I'd like to "put a pin in it", that is to say: drag a pin off the toolbar and drop it where I'm working.

That's easy: span with a fontawesome pin icon, draggable(), done.

$("#spanPin").draggable({containment: ".imgCrop_dragArea"});

Except that when I scroll, the pin is fixed to the viewport, not the element underneath: the form scrolls out from under the pin and I lose my place.

How can I fix the pin to the element, not the viewport?

(I tried pin.js, but that created more errors than it solved.)