Drag and Drop in UI5

[Former Member]

Hi Colleagues,

We would like to use Drag-and-Drop features in our SAP UI5 Application similar to the following example: http://jsbin.com/qova/2/edit

(in our use-case we would like to re-order the items in a list). The given example works only in IE 10 but not in Chrome. Is there another possibility to implement D&D in Chrome?

Thanks,

Hristina && Wei

[former_member193051 · Accepted solution]

Hi,

UI5 does not provide this. But it works fine with jQueryUi if you correct a small error in your bin:

Drag and Drop List Test

If you are using jQuery you should do it in the onAfterRendering of a control instead of the domready. UI5 will throw away the dom if there are updates to the layout. All your jQuery manipulations will be gone if that is the case.

[Former Member · Accepted solution]

Hi,

We would like to have D&D for mobile controls as shown below but it does not work... Is the functionality supported for the mobile controls?

var
oListBox2 = new sap.m.List("lb2", {

                             
items : $.map(city2.split("|"), function(v, i) {

                                             
return new sap.m.StandardListItem({title : v });

                             
}),           height :
"150px"

              
}).addEventDelegate({

    
onAfterRendering :function() {

      
$("#lb2-list").sortable({

                                             
connectWith : ".ui-sortable"

                              }).disableSelection();

      }

    });

Thanks in advance,

Hristina && Wei

[former_member193051 · Accepted solution]

Your selector is not correct... this is how you do it

http://jsbin.com/xamowabu/4/edit

BR,

Tobias

[Former Member · Accepted solution]

Hi Tobias,

We have 2 more questions:

1. Where are the selectors of SAP UI5 controls documented?

2. Which event should we use to trigger some coding on list items re-order?

Thanks in advance,

Hristina && Wei

[sreehari_vpillai · Accepted solution]

All in the third party jquery

[Former Member · Accepted solution]

Could you be more precise?

[former_member346013 · Accepted solution]

Meanwhile we have a solution based on an example published, and hope that someone has the same problem can get some light 🙂

  oDimension.addEventDelegate({

   onAfterRendering : function() {

    $("#lsDimension-listUl").sortable({

     connectWith : ".ui-sortable",

     start : function(event, ui) {

      // creates a temporary attribute on the element with the

      // old index

      $(this).attr('data-previndex', ui.item.index());

     },

     update : function(event, ui) {

      var newIndex = ui.item.index();

      var oldIndex = $(this).attr('data-previndex');

      $(this).removeAttr('data-previndex');

      oController.handleReorder(oldIndex, newIndex);

     }

    }).disableSelection();

   }

  });

Basically you have to use both the start and update events to retrieve the item positions before and after the DnD action. These indice can be used to reorder your list in the model. That is what we do with handleReorder() function in our controller.

[Former Member]

But this UI is not working for mobile because the listener event is not working for tap. Simply, you cannot drag the items of list in mobile. so how could we can drag the items as on fullscreen with mouse pointer on mobile devices like android. Please put the code with JSBIN example.