Using jQuery in Lightning Components to Implement Dragging/Sorting
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
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.
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.
jQueryComp.css: This is a simple css code to use in Lightning Component.
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.....