It is possible.
See http://jsbin.com/zikuj/1/edit?html,js,output for a working implementation that keeps the framework in synch (and forgive the ham-fisted code...i've only been doing js for a few months). That said, this seems too fragile to use in production code.
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="OpenUI5 Listbox Drop and Drag" />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Drag and Drop List Test</title>
<script id='sap-ui-bootstrap'
src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme="sap_goldreflection"
data-sap-ui-libs="sap.ui.commons">
</script>
<script type="text/javascript" src="dnd.js">
</script>
</head>
<body id="body" class="sapUiBody">
<div id="content" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
</body>
</html>
and for dnd.js:
var newItemCount = 30;
function allowDrop(ev) {
'use strict';
ev.preventDefault();
}
function drag(ev) {
'use strict';
//hack to get from text element to the list item...should do a smarter walk up but...
var element = document.elementFromPoint(ev.x, ev.y).parentElement;
console.log("Text data for source object to drag: " + element.id);
ev.dataTransfer.setData("Text", element.id);
}
function drop(ev) {
'use strict';
ev.preventDefault();
var foundIt = false,
sourceID = ev.dataTransfer.getData("Text"),
target = ev.target;
//hacky way to identify if this is the container element to drop on...
while (target && (target.id.indexOf("dndList") !== 0 || (target.id.indexOf("-") > -1))) {
target = target.parentElement;
}
if (target) {
console.log("target id is " + target.id);
var targetWidget = sap.ui.getCore().byId(target.id),
potentialSource = sap.ui.getCore().byId("dndList1"),
psItems = potentialSource.getItems();
psItems.forEach(function (c) {
if (c.sId === sourceID) {
potentialSource.removeItem(sourceID);
targetWidget.addItem(new sap.ui.core.ListItem({id: "xxlb" + newItemCount, text : c.mProperties.text}));
newItemCount++;
foundIt = true;
}
});
if (!foundIt) {
potentialSource = sap.ui.getCore().byId("dndList2");
psItems = potentialSource.getItems();
psItems.forEach(function (c) {
if (c.sId === sourceID) {
potentialSource.removeItem(sourceID);
targetWidget.addItem(new sap.ui.core.ListItem({id: "xxlb" + newItemCount, text : c.mProperties.text}));
newItemCount++;
}
});
}//!foundIt
} //target identified
}//drop
(function () {
'use strict';
var city1 = "Berlin|London|New York|Paris|Amsterdam",
city2 = "Sydney|Melbourne|Brisbane|Perth|Wollongong",
oListBox1 = new sap.ui.commons.ListBox("dndList1", {
items : $.map(city1.split("|").sort(), function (v, i) {
return new sap.ui.core.ListItem({ id: "xxlb1" + i, text : v });
}),
height : "150px"
}),
oListBox2 = new sap.ui.commons.ListBox("dndList2", {
items : $.map(city2.split("|").sort(), function (v, i) {
return new sap.ui.core.ListItem({id: "xxlb2" + i, text : v });
}),
height : "150px"
}),
oButton = new sap.ui.commons.Button({text: "Add an item",
press: function () {
oListBox1.addItem(new sap.ui.core.ListItem({id: "xxlb" + newItemCount, text : "newthing" + newItemCount }));
newItemCount++;
}
}),
oLayout = new sap.ui.commons.layout.MatrixLayout({layoutFixed : false});
oLayout.createRow(oListBox1, oListBox2).createRow(oButton).placeAt("content");
}());