Using jQuery in Lightning Components to Implement Dragging/Sorting

jQuery is a lightweight JavaScript library, which makes it easy to use JavaScript. Using jQuery we can build some rich UI in our Lightning Components.

---

In order to use jQuery in Lightning Components, we first need to upload jQuery related files to Static Resource. Below are the links for downloading jQuery/jQuery UI

jQuery Download Link

jQuery UI Download Link

Once we have the files downloaded, we upload them to Static Resource using Setup-->Custom Code-->Lightning Components-->Static Resource



Once we have the files uploaded to the Static Resource, we can use ltng:require tag to refer those jQuery files in our Lightning Components at the time of component loading. Below I have a sample component bundle (Component/Controller/Style) to display couple of "div" sections to display an Image that can be dragged to a droppable area and another section to display few rows that can be sorted using jQuery function.

jQueryComp.cmp:This is the component code to display sections for dragging and dropping Image and to display some sortable rows.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global">
    <!--Loading jQuery from static resource-->
    <ltng:require scripts="{!join(',',
                           $Resource.jQuery,
                           $Resource.jQuery_UI)}" afterScriptsLoaded="{!c.doInit}"/>
    
    <!--Set attribute to store values-->
    <aura:attribute name="valSet" type="Set"/>
    
    <!--Draggable image-->
    <lightning:tile label="Drag below image to the droppable area"/>
    <div id="draggable">        
        <p><img src="{!$Resource.Image1}" width="200" height="200"/></p>
    </div>   
    
    <!--Area for dropping above image-->
    <lightning:tile label="Droppable area"/>
    <div id="droppable" class="styling1"/>
    
    <!--Iterator to display some rows for sorting-->
    <div class="styling1">
        <lightning:tile label="Sort below rows"/>
        <ul id="sortable">
            <aura:iteration var="s" items="{!v.valSet}">
                <lightning:card><div id="{!s}">{!s}</div></lightning:card>
            </aura:iteration>  
        </ul>
    </div>
    <br/>    
</aura:component>

jQueryComp.js: Here in this controller code, I have few jQuery functions that uses draggable/droppable and sortable methods which are done using components "div" id's.

({
    doInit : function(cmp, event, helper) {
        // Variable to input Set values manually
        var tempSet = ['Drag SetValue1', 'Drag SetValue2', 'Drag SetValue3', 'Drag SetValue4', 'Drag SetValue5'];
        
        // Assign above variable to the Set attribute
        cmp.set("v.valSet", tempSet);
        
        // jQuery instantiation after document is loaded       
        jQuery("document").ready(function(){
            /*
            // jQuery function to get div id and implement dragging on that
            $(".styling").click(function(){
                var divname= this.id;
                console.log(divname);
                //$("#"+divname).draggable();  
                //$("#mainId").draggable();              
            });
            */
            // jQuery function to enable dragging
            $(function(){
                $("#draggable").draggable();
                $("#droppable").droppable();
            });                        
            
            // jQuery function to enable sorting
            $(function(){
                $( "#sortable" ).sortable();
                $( "#sortable" ).disableSelection();
            });            
        });               
    }
})

jQueryComp.css: This is a simple css code to use in Lightning Component.

.THIS.styling1 {
    background-color: lightgrey;
    width: Auto;
    border: 25px solid grey;
    padding: 44px;
    margin: 20px;    
}

---

Finally its now time to demo our code sample. I have placed the above created component on a Home page and here is how it works.....



There are many blogs that explains on how to use jQuery in Lightning Components as jQuery is very light weight JavaScript framework. Below are few links that have inspired me for writing this blog post.

Using jQuery Libraries in Lightning Components: This is best blog that I have come across which teaches step-by-step on how easily we can use jQuery in Lightning Components.

jQuery UI Development: This is the jQuery UI documentation link where we find helpful UI components like Draggable, Selectable, etc.,

jQuery W3Schools: I am sure many of us must have gone through this path of learning things from w3schools.