Skip to Content

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.

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

  1. Nagaraju an

    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

    (0) 

Leave a Reply