Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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"
    }).addStyleClass('sapUiSizeCompact ');
 
    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"
    }).addStyleClass('sapUiSizeCompact ');
 
    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>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
dennisseahpro
0viewers