Skip to main content
A
AM_126256273-Newcomer
3-Newcomer
April 20, 2026
Question

JS and Drag and Drop

  • April 20, 2026
  • 2 replies
  • 37 views

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?

2 replies

A
anursinghCommunity Manager
Community Moderator
June 1, 2026

Hi ​@AM_12625627,

Thank you for your question. 

Your post appears well documented but has not yet received any response. I am replying to raise awareness. Hopefully, another community member will be able to help.

Also, feel free to add any additional information you think might be relevant. It sometimes helps to have screenshots to better understand what you are trying to do. 

 

Regards,

Anurag 

N
nmutter16-Pearl
16-Pearl
June 2, 2026

You can have a look at an unofficial extension which has drag and drop: https://github.com/BogdanMihaiciuc/BMCollectionView#drag--drop (I did not try the functionality). If drag and drop is not necessarily needed you might use the inbuild collection-widget like

Implementing a custom widget for this is quite complex - would not do if another solution would be also okay.

If strings would be sufficient you may have a look at https://support.ptc.com/help/thingworx/platform/r10.1/en/#page/ThingWorx/Help/Mashup_Builder/Widgets/ListShuttleWidgetThemable.html which allows transfer from a to b (not sure via drag and drop).

Terms & ConditionsAccessibility statement