Skip to main content
M
MayankSharma201-Visitor
1-Visitor
September 1, 2020
Solved

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

  • September 1, 2020
  • 1 reply
  • 3537 views

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

Best answer by 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.

1 reply

N
nmilleson17-Peridot
17-Peridot
September 9, 2020

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.

M
MayankSharma201-VisitorAuthor
1-Visitor
September 10, 2020

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

 

 

N
nmilleson17-PeridotAnswer
17-Peridot
September 10, 2020

@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.

    Terms & ConditionsCookie settingsAccessibility statement