Thursday, May 4, 2017


OpenUI5 contains a lot of cool and useful controls, but when it comes to a need of ordering or rearanging some data, there is no out-of-the-box support.

After some googling, i figured out that the internal used jQuery UI library contains something cool called Sortable.

It contains everything you need and the best thing is, that the needed resources are still part of the UI5 framework hidden inside the package "sap/ui/thirdparty/jqueryui/jquery-ui-sortable".

SortableList Demo

Gotcha, but sadly jQuery only support desktop events and therefore the functionality does not work on touch based devices ;-(

Luckily i figured out jQuery UI Touch Punch that enables Touch Event Support for jQuery UI without additional needs.

So besides all the blogs that i have read, this is the first working demo that supports both device types.

On touch devices, i also added a swipe delete action for demonstration purposes, because this coding is part of my karafun karaoke playlist app to manage the singers song list.


  • demo how to use jquery-ui-sortable with div elements on top of sap.m.List
  • adding touch support using touch-punch
  • adding nice css shadow and transparency effect while dragging

Source is located in the github repository.

No comments:

Post a Comment

Thank you for your comment!

The comment area is not intended to be used for promoting sites!
Please do not use such links or your comment will be deleted.


Note: Only a member of this blog may post a comment.