Skip to content

Instantly share code, notes, and snippets.

@dennisseah
Last active June 24, 2020 15:25
Show Gist options
  • Save dennisseah/2507dbe2ab16509d0679 to your computer and use it in GitHub Desktop.
Save dennisseah/2507dbe2ab16509d0679 to your computer and use it in GitHub Desktop.
SAPUI5: Drag and Drop items between two sap.m.List
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script id="sap-ui-bootstrap"
type="text/javascript"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js">
</script>
<style>
.sapMList {
border: 1px solid #ccc;
}
.ui-sortable {
min-height: 40px;
}
.ui-sortable>li{
cursor: pointer;
}
</style>
<script>
jQuery(function() {
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-core');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-widget');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-mouse');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-draggable');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-sortable');
var city1 = "Berlin|London|New York|Paris|Amsterdam";
var city2 = "Sydney|Melbourne|Brisbane|Perth|Wollongong";
var oListBox1 = new sap.m.List("lb1", {
items : $.map(city1.split("|").sort(), function(v, i) {
return new sap.m.StandardListItem({ title : v });
}),
height : "150px",
width: "200px"
});
var oListBox2 = new sap.m.List("lb2", {
items : $.map(city2.split("|").sort(), function(v, i) {
return new sap.m.StandardListItem({title : v });
}), height : "150px",
width: "200px"
});
var oLayout = new sap.m.HBox({
items : [oListBox1, oListBox2]
}).placeAt("content");
oLayout.onAfterRendering = function() {
if (sap.m.HBox.prototype.onAfterRendering) {
sap.m.HBox.prototype.onAfterRendering.apply(this);
}
$("#lb1-listUl").addClass('ui-sortable');
$("#lb2-listUl").addClass('ui-sortable');
$("#lb1-listUl").sortable({
connectWith : ".ui-sortable"
}).disableSelection();
$("#lb2-listUl").sortable({
connectWith : ".ui-sortable"
}).disableSelection();
}
});
</script>
</head>
<body class="sapUiBody">
<div id="content"></div>
</body>
</html>
@oarthursilva
Copy link

oarthursilva commented Mar 15, 2018

Hi,

Two things to be aware of

1. As a good practice, do not modify standard CSS classes

https://openui5.hana.ondemand.com/#/topic/9d87f925dfbb4e99b9e2963693aa00ef.html

2. It does not work on mobile. How did you fix or faced that problem ?

@guillaumegarcia13
Copy link

Hi @afuscella,
Try adding jQuery Touch Punch for mobile support

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment