how to develop "drag and drop" functionality in Thingworx as Extension widget in Mashup?

[MayankSharma20]

Hi community,

we were want to develop drag and drop functionality in "Grid Advanced" widget as part of Thingworx Extension widget.

Background:

1. Thingworx version-8.5

2. Drag and drop item or row from one table or panel to other in view mode of Mashup.

3. wanted to develop as extension widget.

4. widget "Grid Advanced" table rows, can be develop as drag and drop functionality in Mashup(view mode) 

Inspired by below post:

https://material.angular.io/cdk/drag-drop/overview

I have few queries below please address those:

1. Is it possible to create drag and drop functionality in existing or new widgets. If yes then what the way to achieve. 

Example: Drag one row from one widget(Grid Advanced) to other widget table in mashup (view mode).

2. Is it possible to develop this "Drag and drop" functionality as extension widget. If yes then what would be the way.

Example: Drag selected field/box from one panel/table to other in mashup (view mode).

Enclosed screenshot of grid table in View-Mode, wanted to drag&drop rows to and fro from table 1,2,3 respectively.

Help would be appreciated, Thanks in Advance.

Regards,

Mayank

[nmilleson]

We've created one with sortableJS (https://sortablejs.github.io/Sortable/) and it was pretty easy.  They have a 'shared lists' example on their website.

[MayankSharma20]

Thank you so much..!

All example and code will help. I saw grid cell only have example it doesn't have code snippet in repo.

Apart grid all things definitely be helpful in repository.

Regards,

Mayank

[nmilleson]

@MayankSharma20 after re-reading your question, our sortablejs widget is a bit different.  We used it for re-ordering lists by drag-and-drop.  I still think sortablejs (or another similar library) would get you what you need.  I'm unfortunately not able to share the code at this time (developed as part of a customer project); 

You should be able to use sortablejs on any type of element (<tr> in your case).  I usually try and create a small html snippet first as a proof of concept before I try and code it as a ThingWorx widget so that may be a good next step.

[MayankSharma20 · Accepted solution]

your right actually we have created drag n drop horizontal cells on angular using ng-prime on vscode, it has files like .ts, .html, .css, .js, .map. and I had created build of it using ng build which create in dist folder, In Locally using node command prompt. and able to access drag n drop functionality using browser.

But now i have no clue how can be convert/package this to widget extension which can be use in thingworx post import. 

As angular project src/ and app/ folder has many component but not much aware how to convert those to Thingworx widget specific folder to create extension.

I am following some below URL but not getting actual steps to do:

https://community.ptc.com/t5/IoT-Tech-Tips/Integrating-AngularJS-with-ThingWorx/m-p/534655

http://support.ptc.com/help/thingworx_hc/visual_sdk/

Once this achieve i will try same thing with grid cell.