JS and Drag and Drop

Hi Community,

I am a beginner in ThingWorx and trying to understand the correct way to implement custom JavaScript-based functionality in a mashup.

My requirement is drag and drop. For example, I have two columns, A and B, and I want to drag an image from column A and drop it into column B. As soon as the image is dropped, I want to call a ThingWorx service

I have a few beginner questions:

For this kind of requirement, should I create a custom widget / extension, or is there any simpler way to do it in a mashup?
If I need a custom widget, should I build it using plain JavaScript or TypeScript?
Does ThingWorx support this kind of drag-and-drop behavior out of the box, or does it need to be implemented as a custom extension/widget? 
If a custom widget is the right approach, are there any beginner-friendly examples or documentation for creating ThingWorx web components/widgets? PTC’s Web Component SDK docs mention creating widget extensions and packaging web components for Mashup Builder. ()
After a drop event happens in the UI, what is the recommended way to trigger a ThingWorx service from the widget?