Skip to Content

Archived discussions are read-only. Learn more about SAP Q&A

i want to drag table row and drop it on ohter table row

replied

The following code is working as per my requirement.but it is working on chrome and not working in firfox.why?

<!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="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"

            id="sap-ui-bootstrap"

            data-sap-ui-libs="sap.ui.commons,sap.ui.table"

            data-sap-ui-xx-bindingSyntax="complex"

            data-sap-ui-theme="sap_bluecrystal"></script>   

           

             <script>

    // Include jquery UI plugins

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

    $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-droppable');

   

  </script>

     

       <script>

    // Retrieve the button instance  and make it draggable

/*    $(document).ready(function(){

      $("#oTable").draggable({

          helper: "clone"

      });

     

 

    }); */

   

   

    $(function() { 

        setTimeout( function() {

      

     $("#oTable tbody tr").draggable({

         helper: "clone",

           zIndex: 9999,

           cursor: "pointer",

         start: function(event) {

            // alert(this.parentNode.previousSibling.firstChild.childNodes[0].value);

       //    oSelectedId =this.parentNode.previousSibling.firstChild.childNodes[0].value;

              },

          

        drag: function(event) {

              $("#oTable div.sapUiTableCnt,#oTable div.sapUiTableCtrlScr").css("overflow","visible");

     },

     }); 

    

     $("#oTable1 tbody tr").droppable({

          drop: function(event){

              alert();

         

           }

        });

    

    

       },500);

       

       

   });

  </script>

           

    <script type="text/javascript">

    var oTable = new sap.ui.table.Table({ 

        selectionMode: sap.ui.table.SelectionMode.Single,

          id : "oTable",

          columns: [ 

            new sap.ui.table.Column({ 

              label: new sap.ui.commons.TextView({ 

                text: "First name" 

              }), 

              template: new sap.ui.commons.TextView({ 

                text: "{fname}" 

              }) 

            }),

            new sap.ui.table.Column({ 

              label: new sap.ui.commons.TextView({ 

                text: "Last name" 

              }), 

              template: new sap.ui.commons.TextView({ 

                text: "{lname}" 

              })

            })

          ]

        });

        var model = new sap.ui.model.json.JSONModel({

          data: [

            {fname: 'John', lname: 'Doe', ***: 'M'},

            {fname: 'Mary', lname: 'Ann', ***: 'F'},

            {fname: 'Andy', lname: 'Gates', ***: 'M'},

            {fname: 'Betty', lname: 'Lu', ***: 'F'},

          ]

        });

        oTable.setModel(model);

        oTable.bindRows("/data");                     

        oTable.placeAt('content');

      

        var oTable1 = new sap.ui.table.Table({ 

            id : "oTable1",

          selectionMode: sap.ui.table.SelectionMode.Single,

            columns: [ 

              new sap.ui.table.Column({ 

                label: new sap.ui.commons.TextView({ 

                  text: "course" 

                }), 

                template: new sap.ui.commons.TextView({ 

                  text: "{course}" 

                }) 

              }),

              new sap.ui.table.Column({ 

                label: new sap.ui.commons.TextView({ 

                  text: "specialization" 

                }), 

                template: new sap.ui.commons.TextView({ 

                  text: "{specialization}" 

                })

              })

            ]

          });

     

          var model1 = new sap.ui.model.json.JSONModel({

            data: [

              {course: 'mca', specialization: 'computer application'},

              {course: 'mba', specialization: 'Bussiness Administration'},

            ]

          });

          oTable1.setModel(model1);

          oTable1.bindRows("/data");                     

          oTable1.placeAt('content');

    </script>

  </head>

  <body id="content" class="sapUiBody">

  </body>

</html>

0 View this answer in context
Not what you were looking for? View more on this topic or Ask a question