How to use drag and drop to sort a SAPUI5 list

[Former Member]

In this tutorial I'll explain how you can make a sap.m.List sort-able by letting the user drag and drop the list items. For a demo of what this looks like, have a look at this video:

In Eclipse, create a new SAPUI5 project. In your index page, the following code is important:

Jquery UI provides an easy way to implement sorting, dragging, dropping,... By importing these libraries we can make use of these functionalities in our SAPUI5 project.

In our view we create our list, don't forget to give your list an ID, we need this in the controller:

In our controller we do the following:

We access our list and we need to put the sort-able function specifically on the <UL> element of the list.

And that's it, with this short peace of code you can make your sap.m.list sort-able by using drag and drop.

[Former Member]

Hi Stephanie,

This is very good example, Thank you.

Lets say Instead of added a new item to the Droppable table, we need to replace the item in the Droppable table (where the Draggable item is dropped) how can we get the Dropped Index?

Thanks for your time.

Regards,

Nagaraju A

[xiaoqing_chen]

Hi @stephaniel,

I know how to implement drag and drop for sap ui list. But in my case, we need to implement drag and drop for sap.m.Table. Do you know how to do it, thanks!

[Former Member]

Hi  Xiaoqing Chen,

I haven't tried that one yet so I'm afraid I can't help you on this one.

[rafael_menezes]

Hi, Stephanie!

First of all, nice explanation! Helped me a lot with a requirement I was trying to fulfill.

I'd like to know if you could help me with the following issue: take this picture as an example

Imagine that, when I drag any list item the counter property (which is bound) is update in such a way it is always ascending. Is there an event (something like onDrop) to register a callback for changing the bound value?

Thx in advance.

Regards,

Rafael M.