Skip to Content
Author's profile photo Cahit Guerguec

UI5ers Buzz #32: Drag-and-Drop is now enabled for all UI5 Controls

One of the most powerful interaction design pattern available to developers is Drag-and-Drop.

Drag-and-Drop allows moving, reordering and applying actions to objects. This makes it a simple and intuitive action, in line with Fiori and users’ expectations.

With SAPUI5 version 1.56, a new dragAndDrop aggregation with multiplicity 0..n is now available for every Control in UI5 and it can be used to configure complete drag-and-drop scenarios via DragInfoDropInfo or DragDropInfo without really giving it much thought!

Let’s briefly have a look at this simple but powerful drag-and-drop condiguration objects.

 

 

DragInfo can be used just to allow dragging when drop target is not known or not owned. Additional draggable checks can be done at the dragStart event and default can be prevented.

DropInfo can be used as a general drop target. Incoming data may need to be validated at the dragEnter event. Applications should just implement the drop event.

DragDropInfo can be used when the drag source and the drop target are tightly coupled and both are known. The most common use-case is enablement own aggregations.

Both DragInfo and DropInfo offers groupName property. If this property is specified, then the DropInfo object will only interact with the relevant DragInfo objects within the same group.

Let’s don’t make this attractive topic boring with long texts. Let’s see a little code snippet first.

 Enable reordering of the items inside the List
 <List items=”{/Products}”>
    <dragDropConfig>
        <dnd:DragDropInfo
            sourceAggregation=”items”
            targetAggregation=”items”
            dropPosition=”Between”
            drop=”onReorderItems”/>
    </dragDropConfig>
 </List>

 

Now let’s see Drag-and-Drop in action.

 

If you could follow all the links above that means you’ve learned already a lot. Now it is time for fun! ? Yes… UI5 is not only for enterprise-ready web applications, sometimes just for jun. Let’s play a little drag-and-drop game and don’t hesitate to hack the source code if you cannot solve the puzzle.

 

Here are some useful links if you want to know more about drag-and-drop in UI5.

 

Previous post: UI5ers Buzz #31

Cahit

"Guess who I am?".charAt.call(Number, 1) + (this + "")[9] + [...[...'.....']].length + ``.substr.call(/(?:)/.constructor.name, 3) + alert.name.slice(-3);

 

Assigned Tags

      17 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Michelle Crapo
      Michelle Crapo

      I really like this blog!!!!   Examples my poor overloaded mind really appreciates the time you took to put together examples.   (Samples)

      Author's profile photo Cahit Guerguec
      Cahit Guerguec
      Blog Post Author

      I am glad to hear that you liked the samples. Actually I wanted to add more samples, like defining custom drag ghosts, transferring data between two UI5 applications... Stay tuned, I will update the post soon.

       

      Author's profile photo Michelle Crapo
      Michelle Crapo

      Excellent!  Following this one.

      Author's profile photo Margot Wollny
      Margot Wollny

      I just love your dragNdrop game 😀 I remember having it as kid as a "real" game ...  again addicted to it! Still wonder how you made it in 38 drops ...???

      If you would add a highscore to it, then this Web page would become quite busy 😉

      Thanks for the great work!

      Author's profile photo Cahit Guerguec
      Cahit Guerguec
      Blog Post Author

      I also really like this game. It is actually a family game for us. My 6 years old daughter loves to play 6 squares version. http://output.jsbin.com/gokehiz

      I am happy that she didn't realized my tricks yet ? http://jsbin.com/kuboxaj/edit?html,output

       

      Author's profile photo Volker Buzek
      Volker Buzek

      very cool shakes, generic drag'n'drop functionality!

      I almost hesitate to ask...but...how do we test that w/ OPA? Probably there's already some documentation out there and I just might have missed it.

       

      Author's profile photo Cahit Guerguec
      Cahit Guerguec
      Blog Post Author

      Hi Volker, as you can see at the concept slides, UI5 is leveraging the native HTML Drag&Drop API.

       

      This means you can just trigger native events from the control DOM to test the complete drag&drop scenarios. So something like below probably be enough to test most of the use cases.

      function triggerEvent (control, type, options) {
          let event = new DragEvent(type, Object.assign({bubbles: true, cancelable: true}, options));
          control.getDomRef().dispatchEvent(event);
      }

       

      We also had an idea to simulate drag&drop to help keyboard handling, context menu and toolbar buttons that do the equivalent of the drag&drop actions for accessible reasons. Probably this could also be very nice syntatic sugar for testing.

      DnDSim.grab(item1).moveToBottomOf(item5).drop();
      DnDSim.drag(item2).to(item4);

      Thanks for this question now we have one more reason to have this in the framework!

      Author's profile photo Volker Buzek
      Volker Buzek

      finally got around putting drag'n'drop tests into code, including that nice syntactic sugar: https://blogs.sap.com/2019/08/06/testing-ui5-apps-part-4-advanced-testing-mumbo-jambo/ 🙂

      Author's profile photo D. Merrill
      D. Merrill

      I believe the sap.ui.core.HTML component used to support drag-and-drop of standard HTML elements.  Is this still possible with the latest UI5 enhancements?

       

      Author's profile photo Jens Niemeyer
      Jens Niemeyer

      Great examples. If you want to add an other one:

      Drag entries from a list to a planning calendar would be cool :-9

       

      Cheers

      Jens

      Author's profile photo Dominik Feininger
      Dominik Feininger

      Hi Cahit Guerguec, that sounds really great. Is there a way to Drag and Drop cells in an Ui5 table?

      So the cells switch positions?

      thx Dominik

      Author's profile photo Raja Prasad Gupta
      Raja Prasad Gupta

      Hi,

      is drag and drop officially supported in SAP Fiori?

       

      Regards,

      Raja

      Author's profile photo Ilyes Mansour
      Ilyes Mansour

      Thank you for sharing this blog.

      But i still have a question, even 'Drag-and-Drop is now enabled for all UI5 Controls' i still don't find a way ,for exemple, to drag a Button control or to configure a custom control as droppable.

      Only controls that we can put 'dragDropConfig' inside them can be defined as draggable or drappable?

      If yes, is there another solution to go ahead and let my Button draggable for example?

      Thank you a lot.

      Ilyes

       

      Author's profile photo Anderson Jesus
      Anderson Jesus

      Can i do it with Tiles (genericTile) ? Bcause tile container is deprecated and grid container is experimental....

      Author's profile photo Joel Plambeck
      Joel Plambeck

      Hi Cahit,

      Very interesting blog!

      I'm trying to make the rows of a PlanningCalendar sortable via drag and drop but am struggling to make it work.

      This doesn't seem to work (simplified):

      		<PlanningCalendar>
      			<dragDropConfig>
      				<dnd:DragDropInfo sourceAggregation="rows" targetAggregation="rows"/>
      			</dragDropConfig>
      			<rows>
      				<PlanningCalendarRow>
      					<appointments>
      						<unified:CalendarAppointment>
      						</unified:CalendarAppointment>
      					</appointments>
      				</PlanningCalendarRow>
      			</rows>
      		</PlanningCalendar>

      Am I doing something wrong or does this not work yet?

      Author's profile photo Alex Dong
      Alex Dong

      Dear UI5 Expert,

       

      This is really cool! 😀

       

      Author's profile photo Mauro Cattaneo
      Mauro Cattaneo

      Hi,

      is there a way to drag entries from a list to a planning calendar?

      Thanks a lot