Last active
June 24, 2020 15:25
-
-
Save dennisseah/2507dbe2ab16509d0679 to your computer and use it in GitHub Desktop.
SAPUI5: Drag and Drop items between two sap.m.List
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
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 ?
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
Thanks for this code... I have been searching for something like this...