0

I could find that drag and drop are supported in SAPUI5. But I am not able to implement the same in my app. I tried to bind to the dragstart and dragleave events, they are not working.

I even tried to example provided in the other threads(http://jsbin.com/qova/2/edit?html,output). This example is also not working. I can select the list item, but when I try to drag, the selection just extends and nothing happens.

selection extends

Please let me know if I am doing anything wrong.

Here is the HTML Snapshot

enter image description here

Source 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">
    $.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');

    $(function() {
        $("#lb1-list, #lb2-list").sortable({
            connectWith : ".ui-sortable"
        }).disableSelection();
    });

    var city1 = "Berlin|London|New York|Paris|Amsterdam", 
        city2 = "Sydney|Melbourne|Brisbane|Perth|Wollongong";

    var oListBox1 = new sap.ui.commons.ListBox( "lb1", {
        items : $.map(city1.split("|").sort(), function(v, i) {
            return new sap.ui.core.ListItem({ text : v  });
        }), height : "150px"
    });

    var oListBox2 = new sap.ui.commons.ListBox("lb2", {
        items : $.map(city2.split("|").sort(), function(v, i) {
            return new sap.ui.core.ListItem({text : v });
        }), height : "150px"
    });

    var oLayout = new sap.ui.commons.layout.MatrixLayout({layoutFixed : false})
    oLayout.createRow(oListBox1, oListBox2).placeAt("content");
</script>

</head>
<body id="body" class="sapUiBody">
    <div id="content"></div>
</body>
</html>

Update: The solution works fine if the list is static. But for dynamic lists, where we add rows via code, SAPUI5 re-renders the list and calls remove attributes. The remove attributes call the jQuery-UI remove attributes and removes the CSS Class attributes. Once I made the list items static, the drag drop is working fine.

Is there a solution for drag-drop when the list is dynamic?

Found one solution Please note, this solution is for UI5 applications created with separate views and controllers.

For dynamic lists, the jquery-ui draggable has to called in onAfterRendering. Otherwise, the classes added by jquery-ui will be removed once the list re-renders.

For inline UI5 apps like the one I posted, we can try adding "onAfterRendering" event delegate to list controls.

8
  • SOP issue if you are using Chrome you will need to --disable-web-security to view the jsbin, else run scenario on your own network
    – Jasper_07
    Feb 20, 2014 at 5:13
  • Thanks Jasper for your reply. I tried the example by copying code to notepad and launching in chrome. It didn't work I also tried from Eclipse by creating SAPUI5 application. Still it is not working...Not sure what is wrong. Will appreciate your help.
    – Anand N
    Feb 20, 2014 at 7:11
  • i just created and ran on localhost works on Safari and FF, have you changed the sap-ui-bootstrap to point to local resources?
    – Jasper_07
    Feb 20, 2014 at 12:51
  • Yes Jasper, I did for the eclipse version, but for the notepad version, I am still referring to "openui5.hana.ondemand.com". I have updated my post with HTML snapshot...Does the sortable object, modify the listbox css class? because I coudln't see any change in the listbox...I dont know if I am doing anything wrong...
    – Anand N
    Feb 20, 2014 at 18:20
  • 1
    Ok I guess I found the issue with my app in Eclipse, I am adding items to the list dynamically and its causing the Listbox to be re-rendered by SAPUI5 which inturn calls remove attributes. The remove attributes call the jQuery-UI remove attributes and removes the CSS Class attributes. Once I made the list items static, the drag drop is working fine...
    – Anand N
    Feb 20, 2014 at 21:44

3 Answers 3

1

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");

}());
2
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes.
    – Cfreak
    Aug 29, 2014 at 12:18
  • ok :-) All the links to other answers seemed broken so a full working example is in the bin above. You need to set draggable and register the dom event handlers in the html: <body id="body" class="sapUiBody"> <div id="content" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" ></div> </body> and then in your drag and drop code you need to traverse the dom elements to find the widgets you actually mean to be your source and targets. (I used a pattern in the id names to do this which is hacky but gets the job done). Aug 29, 2014 at 12:21
1

Found one solution:

Please note, this solution is for UI5 applications created with separate views and controllers.

For dynamic lists, the jquery-ui draggable has to called in onAfterRendering of the controller. Otherwise, the classes added by jquery-ui will be removed once the list re-renders.

For inline UI5 apps like the one in the question I posted, we can try adding "onAfterRendering" event delegate to list controls.

1

I have an example here maybe it is helpful

Example

<!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>

We use jqueryui API which is already bundled in SAPUI5 to achieve this.

-D

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.