Skip to Content
Former Member
Jan 28, 2014 at 06:41 PM

jQuery Drag&Drop functions doesn't work in


Hello at all,

i'm facing the same problem like Samba in the SAP HANA Developer Center

I tried to use drag and drop functions using jQuery. Without the everything works fine. But when i put the page content into a shell drag & drop isn't working anymore.

        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <script src="resources/sap-ui-core.js"
                data-sap-ui-libs="sap.ui.commons, sap.ui.table, sap.ui.ux3"
        <script type="text/javascript" src="js/commons.js"></script>
        <script type="text/javascript" src="js/model.js"></script>         <!-- gateway access -->
        <script type="text/javascript" src="js/filter.js"></script>
        <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required
        <link rel="stylesheet" type="text/css" href="css/custom.css">

var oShell = new sap.ui.ux3.Shell("appShell", {
                            appTitle: "App",
                            appIcon: "pics/icon.png",
                            aooIconTooltio: "LOGO",           
                            showSearchTool : false,
                            showInspectorTool : false,
                            showFeederTool : false,
                            showLogoutButton : false,
                            headerType : sap.ui.ux3.ShellHeaderType.SlimNavigation,
                            worksetItemSelected : function(oEvent){
                                    var id = oEvent.getParameter("id");
                oShell.addWorksetItem(new sap.ui.ux3.NavigationItem("Item",{key : "IItem", text : "Text"}));


                //jQuery functions for drag & drop, the referenced controls are defined in the view
               // makes the table with id TableWIA dragable
                $(function() {
                     $( "#TableWIA" ).draggable();

               // by setting droppable it's possible to receive drop events at the control with id oHorLayout
                 $(function() {
                     $( "#oHorLayout" ).droppable();
               // to drag one tablecell to another table
                 $(function() {
                     $( "#TableWIA tbody, #TableWITO tbody" ).sortable({ 
                                 connectWith : ".ui-sortable"             

//... place content and so on

Furthermore i found out that the problem first occurs for elements which placed in the follwing tag

<article id="appShell-content" class="sapUiUx3ShellContent" role="main">.

Perhaps someone has a solution for it?

Many thanks