3

Iam 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. 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;
    }
  • 1
    Is this article useful: How to Implement Drag and Drop in Lightning Web Component – Robs Mar 18 at 10:14
  • Thanks Rob, but I am trying to achieve this in Aura Component not in LWC. I've my reasons – Dave Mar 18 at 11:43
  • Sure, but the base concepts are the same regardless, so that article contains everything you need. – Robs Mar 18 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 Mar 19 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 Mar 20 at 2:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.