Skip to Content
Author's profile photo Stephanie Lemoine

How to use drag and drop to sort a SAPUI5 list

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:

/wp-content/uploads/2015/08/index_775484.jpg

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:

view1.JPG

In our controller we do the following:

controller1.JPG

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.

Assigned tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      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

      Author's profile photo Former Member
      Former Member

      Hi @Stephanie Lemoine,

      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!

      Author's profile photo Stephanie Lemoine
      Stephanie Lemoine
      Blog Post Author

      Hi  Xiaoqing Chen,

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

      Author's profile photo Rafael Menezes
      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.