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(',', 
                  afterScriptsLoaded= "{!c.scriptsLoaded}"/>
    <aura:attribute name="Values" type="List"/>
        <table class="tables_ui" id="dragThis"><caption><h4>Test Table</h4></caption>

            <tbody class="sortTable">
                <aura:iteration items="{!v.Values}" var="sortT">
JS Controller:

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

    scriptsLoaded : function(component, event, helper) {

        $(document).ready(function() {
            var $tabs = $('#dragThis')
                items: "> tr:not(:first)",

.THIS .tables_ui {
      margin:2px 2%;
      border:2px solid #3333fe;
.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
    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


You must log in to answer this question.