UI5 Drag and drop example with Gridlist

component.js

init: function () {
  // Other initialization functions have been pruned
  // set the spec models accordingly
  this.setModel(models.createActiveSpecStepModel(), "activestep");
},

Detail.controller.js

handleDropToList(oEvent) {
  // Define if item is dropped on, before or after elements in new drop-list
  // let sDropPosition = oEvent.getParameter("dropPosition");

  // Define the list which is dragged from, and the handled Item
  let oDraggedControl = oEvent.getParameter("draggedControl");

  let oDraggedItems = oDraggedControl.mBindingInfos.items;
  let oDraggedPath;

  // if oDraggedItems does not exist, get the path of the bound context
  if (!oDraggedItems) {
    oDraggedPath = oDraggedControl.getBindingContext("activespec").getPath();
  } else {
    oDraggedPath = oDraggedItems.path;
  }
  let sDraggedList = oDraggedPath.split("/")[2];
  let sDraggedIndex = oDraggedPath.split("/")[3];

  // Vars for the Dropped Control
  let oDroppedControl = oEvent.getParameter("droppedControl");

  let oDroppedItems = oDroppedControl.mBindingInfos.items;
  let oDroppedPath;

  // if oDraggedItems does not exist, get the path of the bound context
  if (!oDroppedItems) {
    oDroppedPath = oDroppedControl.getBindingContext("activespec").getPath();
  } else {
    oDroppedPath = oDroppedItems.path;
  }
  let sDroppedList = oDroppedPath.split("/")[2];

  /** Drag and drop Actions
   * Available params:
   * sDraggedList => Name of the contextual list the item was dragged from
   * sDraggedIndex => Index of the dragged item
   * sDroppedList => Name of the contextual list the item is dropped into
   */

  //  Step one: Remove the item from the initial list
  let fromList = this.getView()
    .getModel("activespec")
    .getProperty("/spec_progress/" + sDraggedList);

  let item = fromList.splice(sDraggedIndex, 1)[0];

  // Step two: Add the item to its new list
  let toList = this.getView()
    .getModel("activespec")
    .getProperty("/spec_progress/" + sDroppedList);

  toList.push(item);

  // Step three: Set the list accordingly to their new status
  this.getView()
    .getModel("activespec")
    .setProperty("/spec_progress/" + sDraggedList, fromList);

  this.getView()
    .getModel("activespec")
    .setProperty("/spec_progress/" + sDroppedList, toList);
},

Detail.view.xml

<l:HorizontalLayout class="sapUiContentPadding ui-fullwidth">
	<f:GridList growingScrollToLoad="true" growingThreshold="2" id="todo-dnd-list" headerText="Todo" items="{ path: 'activespec>/spec_progress/todo' }">

		<f:dragDropConfig>
			<dnd:DragInfo sourceAggregation="items" />
			<dnd:DropInfo targetAggregation="items" dropPosition="Between" dropLayout="Horizontal" drop="handleDropToList"/>
		</f:dragDropConfig>

		<f:customLayout>
			<grid:GridBoxLayout boxMinWidth="17rem"/>
		</f:customLayout>

		<f:GridListItem highlight="Information">
			<VBox height="100%">
				<VBox class="sapUiSmallMargin">
					<layoutData>
						<FlexItemData growFactor="1" shrinkFactor="0" />
					</layoutData>
					<Title class="sapUiTinyMarginBottom" text="{activespec>step_title}" wrapping="true" />
					<Label text="{activespec>step_description}" wrapping="true" />
				</VBox>
				<OverflowToolbar design="Solid" class="sapContrast">
					<VBox>
						<Label text="Assigned to: {activespec>step_assignee}" wrapping="true" />
						<Label text="Due at {activespec>step_done_when}" wrapping="true" />
					</VBox>
					<ToolbarSpacer />
					<Button icon="sap-icon://delete" type="Reject" press="handlePress" />
					<Button icon="sap-icon://edit" type="Transparent" press="handlePress"/>
				</OverflowToolbar>
			</VBox>
		</f:GridListItem>
	</f:GridList>
	<!-- / Todo List -->

	<!-- Wip List -->
	<f:GridList id="wip-dnd-list" headerText="Work in Progress" items="{ path: 'activespec>/spec_progress/wip' }">

		<f:dragDropConfig>
			<dnd:DragInfo sourceAggregation="items" />
			<dnd:DropInfo targetAggregation="items" dropPosition="Between" dropLayout="Horizontal" drop="handleDropToList"/>
		</f:dragDropConfig>

		<f:customLayout>
			<grid:GridBoxLayout boxMinWidth="17rem"/>
		</f:customLayout>

		<f:GridListItem highlight="Warning">
			<VBox height="100%">
				<VBox class="sapUiSmallMargin">
					<layoutData>
						<FlexItemData growFactor="1" shrinkFactor="0" />
					</layoutData>
					<Title class="sapUiTinyMarginBottom" text="{activespec>step_title}" wrapping="true" />
					<Label text="{activespec>step_description}" wrapping="true" />
				</VBox>
				<OverflowToolbar design="Solid" class="sapContrast">
					<VBox>
						<Label text="Assigned to: {activespec>step_assignee}" wrapping="true" />
						<Label text="Due at {activespec>step_done_when}" wrapping="true" />
					</VBox>
					<ToolbarSpacer />
					<Button icon="sap-icon://edit" type="Transparent" press="handlePress" />
				</OverflowToolbar>
			</VBox>
		</f:GridListItem>
	</f:GridList>
	<!-- / Wip List -->

	<!-- Done List -->
	<f:GridList id="done-dnd-list" headerText="Done" items="{ path: 'activespec>/spec_progress/done' }">

		<f:dragDropConfig>
			<dnd:DragInfo sourceAggregation="items"/>
			<dnd:DropInfo targetAggregation="items" dropPosition="Between" dropLayout="Horizontal" drop="handleDropToList"/>
		</f:dragDropConfig>

		<f:customLayout>
			<grid:GridBoxLayout boxMinWidth="17rem"/>
		</f:customLayout>

		<f:GridListItem highlight="Success">
			<VBox height="100%">
				<VBox class="sapUiSmallMargin">
					<layoutData>
						<FlexItemData growFactor="1" shrinkFactor="0" />
					</layoutData>
					<Title class="sapUiTinyMarginBottom" text="{activespec>step_title}" wrapping="true" />
					<Label text="{activespec>step_description}" wrapping="true" />
				</VBox>
				<OverflowToolbar design="Solid" class="sapContrast">
					<VBox>
						<Label text="Assigned to: {activespec>step_assignee}" wrapping="true" />
						<Label text="Due at {activespec>step_done_when}" wrapping="true" />
					</VBox>
					<ToolbarSpacer />
					<Button icon="sap-icon://edit" type="Transparent" press="handlePress" />
				</OverflowToolbar>
			</VBox>
		</f:GridListItem>
	</f:GridList>
</l:HorizontalLayout>

models.js

createActivespecModel() {
  return new JSONModel([
    {
    // Other props have been pruned
      spec_progress: {
        todo: [],
        wip: [],
        done: [],
      },
    },
  ]);
},