68
Views
8
Comments
[Sortable Drag and Drop] Multiple drag and drop sortable widget
sortable-drag-and-drop
Reactive icon
Forge asset by Leonardo Pires
Application Type
Reactive

Hi,

I have two drag and drop sortable widgets on the same screen, and have a problem:

OnChange event of both lists are trigger the same client action event, although each of them point to another client action.

My example:

First sortable widget points to childGroupList list:

Second widget points to QuestionsListSortable list: :

 


Once I drag QuestionsListSortable  list, QuestiomSortableOnChange event is trigger - as expected

But, once I drag childGroupList  list, QuestiomSortableOnChange event is triggertoo - instead of ChildGroupSortableOnChange client action

Am I missing something?

Thanks!

2026-02-06 06-25-47
Mohan Sigamani

Is your two lists are nested? 

 Like a list inside another list 

UserImage.jpg
Fang Experts

not, the list are not nested

2023-12-28 15-13-10
Mauro Alviza

Hi Fang!

Can you please share the oml file?

2023-01-05 17-39-49
Leonardo Pires
Champion

Hi, was I able to share the link to the screen that implemented the two lists?

Or share oml to understand the way you are doing it?

Maybe it's a conflict in the extend, try putting different names in the classes.

Regards

UserImage.jpg
Fang Experts

Hi Leonardo Pires ,

Could you explain how to put different names in the classes of the extend property please?

See my extend property of the two lists:

1. "dragClass: 'light-grey-class', handle: '.sort-handle-child', ghostClass: 'blue-background-class', animation: 300"

2. "dragClass: 'light-grey-class', group: 'questionList', handle: '.sort-handle', ghostClass: 'blue-background-class', animation: 300"


2022-04-18 12-03-50
Diogo Bandeira

I have the same issue. Did you manage to solve it @Fang Experts?

UserImage.jpg
Tom Rowland

Same issue.
[Technical:]
The issue seems to be that the TriggerOnChange in the Sortable's JavaScript is global, so another instance will overwrite it.
To fix this, the script has to be modified so that you also instance TriggerOnChange. One option I tried was to insert the $parameters.WidgetId to the name, and attach this function to the window. However, I found this did not work if you Sortables are encased in blocks. The solution to this was to attach a TriggerOnChange to the list element and have a global TriggerOnChange be passed the  WidgetId, find that element, and call its TriggerOnChange. Replace the SortableOS script (in the Sortable block's SetSortable) with this:

SortableEvent = null;// Define a unique function for this instance by attaching it to the DOM elementvar wbElement = document.getElementById($parameters.WidgetId);wbElement.TriggerOnChange = function(a, b) {    return $actions.TriggerOnChange(a, b);  // Call the action specifically bound to this element};// Global function to trigger the specific instance's functionTriggerOnChange = function(widgetId, a, b) {    var element = document.getElementById(widgetId);    if (element && typeof element.TriggerOnChange === "function") {        return element.TriggerOnChange(a, b);    }};// Define the Extend configuration with the updated call to the TriggerOnChange function$actions.SetVariable("Extend", ["{",    $parameters.Extend === "" ? $parameters.Extend : $parameters.Extend + ",",    "onEnd: function(e) {",        "SortableEvent = e;",        "TriggerOnChange('" + $parameters.WidgetId + "', e.newIndex, e.oldIndex);",  // Call with widget ID"}}"].join(""));// Instantiate Sortable with the unique Extend variablenew Sortable(document.getElementById($parameters.WidgetId), Extend);

[Non technical:]

Clone the SortableDragandDrop_lib module. Replace the Sortable block with the one in the attached oml
 

SortableDragandDropDEMO.oml
UserImage.jpg
Ram vishwanath L

i'm using two different parallel list both have sortable sort option either one is not working what is the solution for this.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.