Hi Liesbeth,

It looks like the OSBlockWidget class that OutSystems assigns to the div of a block is setting the display to inline, which breaks the Sortable.js script.  One option is to just place your widget in a container instead of directly in the list.  But if that's no good you can fix it by modifying the block's parent element during the OnReady event.  You'll also want to do this in order to set the data-id of the block as well.  In you widget, make sure the root container has a name.  Then have the following javascript in the OnReady of your widget:

var rootElem = document.getElementById($parameters.rootId);

if (rootElem) {

    var parent = rootElem.parentElement;

    if (parent)

    {

        parent.setAttribute('data-id', $parameters.dataId);

        parent.style.display = "block";

    }

}

That should get it working.  I've included a demo OML that has a page called SortableWidgets.

Thank you Greg for looking at this! 

I tried it with the  JS on ready but always get the same error: cannot find children of 'null'.

The widget had already been placed inside a container. The container has been given the data-id attribute. This by itself does not work. However, if I add "div" to the ChildElementSelector it works. The problem here is that the events are not triggered. So the Sortable object is made and I can sort the items, but the events are not triggered so nothing happens on choose, unchoose, update, end... 

It also works if I set the data-id attribute on the image inside the widget and set "img" as ChildElementSelector. However, here too are none of the events triggered. 

For now I have added a button to save the new order but I will keep looking for a workaround for this so that it saves after every sort action.

Thank you for taking a look at this, much appreciated! 

Liesbeth

Hi Greg,

I have finally found a solution.

As I did before, I placed the widget inside a container and that container has a data-id attribute. For some reason I still need to set the ChildElementSelector to "div" otherwise it doesnt work.

I finally made the events trigger using the JavaScript as in your div in div example! The events are not triggered otherwise. 

I am very happy this works!

Thank you very much,

Liesbeth