3

I am here trying to sort table row using drag and drop functionality. Drag and drop in table and the jQuery seems to work when I am running below code in Lightning app but, not working when creating a Salesforce tab and doing the same. It shows some discrepancy.

What would cause this? Why it is working fine in app but not in tab?

Aura Component:

<aura:component description = "dragorSortTableRows" implements="force:appHostable,flexipage:availableForAllPageTypes"
                access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <ltng:require scripts="{!join(',', 
                           $Resource.jQuery3, 
                           $Resource.jQuery_UI)}"
                  afterScriptsLoaded= "{!c.scriptsLoaded}"/>
    <aura:attribute name="Values" type="List"/>
    
    <lightning:card>
        <table class="tables_ui" id="dragThis"><caption><h4>Test Table</h4></caption>

            <tbody class="sortTable">
                <tr>
                    <th>Id</th>
                    <th>Name</th>  
                </tr>
                <aura:iteration items="{!v.Values}" var="sortT">
                    <tr>
                        <td>{!sortT.Id}</td>                                                                                         
                        <td>{!sortT.Name}</td>                                                               
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
    </lightning:card>
</aura:component>
JS Controller:


({
    doInit : function(component, event, helper) {
        var datalist =[
            { Id: 5,Name: 'Test1'},
            {Id: 6, Name: 'Test2'},
            { Id: 7, Name: 'Test3'},
        ];

 component.set("v.Values",datalist);
},
    
    scriptsLoaded : function(component, event, helper) {

        $(document).ready(function() {
            var $tabs = $('#dragThis')
           
            $("tbody.sortTable").sortable({
                items: "> tr:not(:first)",
            });
        });
    }
})
CSS:


.THIS .tables_ui {
      display:inline-block;
      margin:2px 2%;
      border:2px solid #3333fe;
      border-spacing:0;
    }
.THIS .tables_ui ul li {
      min-width: 200px;
    }
.THIS .dragging li.ui-state-hover {
      min-width: 240px;
    }
.THIS .dragging .ui-state-hover a {
      color:green !important;
      font-weight: bold;
    }
.THIS .tables_ui th,.THIS td {
      text-align: right;
      padding: 2px 4px;
      border: 1px solid;
    }
.THIS .t_sortable tr,.THIS .ui-sortable-helper {
      cursor: move;
    }
.THIS .t_sortable tr:first-child {
      cursor: default;
    }
.THIS .ui-sortable-placeholder {
      background: yellow;
    }
8
  • 1
    Is this article useful: How to Implement Drag and Drop in Lightning Web Component
    – Robs
    Commented Mar 18, 2020 at 10:14
  • Thanks Rob, but I am trying to achieve this in Aura Component not in LWC. I've my reasons
    – Dave
    Commented Mar 18, 2020 at 11:43
  • Sure, but the base concepts are the same regardless, so that article contains everything you need.
    – Robs
    Commented Mar 18, 2020 at 16:16
  • 1
    My question was why above code is not working in Lightning Tab, for base concepts above code is already working in Lightning App as i want it to be, but I want to know why it is not working in Lightning Tab and solution for this.
    – Dave
    Commented Mar 19, 2020 at 10:10
  • 1
    Tried your code in my dev edition org and It works for me in both lightning app and lightning tab. Here is the gif: imgur.com/a/J8FspkQ
    – javanoob
    Commented Mar 20, 2020 at 2:35

0

You must log in to answer this question.