jQuery Drag&Drop functions doesn't work in sap.ui.ux3.shell

175 Views

Hello at all,

i'm facing the same problem like Samba in the SAP HANA Developer Center http://scn.sap.com/thread/3480868.

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

<!DOCTYPE HTML>
<html>
    <head>
        <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"
                id="sap-ui-bootstrap"
                data-sap-ui-libs="sap.ui.commons, sap.ui.table, sap.ui.ux3"
                data-sap-ui-theme="sap_goldreflection">
       
        </script>
        <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">
       
        <script>
       
        $.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-droppable'); 
        $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-sortable'); 

......
......
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.setContent(getShellContent(id));
                            }
            });
           
                                         
                oShell.addWorksetItem(new sap.ui.ux3.NavigationItem("Item",{key : "IItem", text : "Text"}));

.....
.....

oShell.placeAt("content");   
       
                //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"             
                            }).disableSelection(); 
             });      

//... 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

Kai