Lightning component with drag and drop feature

A simple lightning component explains how to create drag and drop elements in lightning.


Screenshots: -

Component: -

Component_A.cmp

1. <aura:component >
2. <!--attribute-->
3.     
4.     <!--component markup-->
5.     <div class="slds-text-heading_large slds-p-left_medium">Component A</div>
6.     
7.     <div class="slds-grid">
8.         <div class="slds-col slds-size_3-of-12 one" draggable="true" ondragstart="{!c.dragStart}">
9.             <div class="slds-text-heading_small">This is first box</div>
10.         </div>
11.         
12.         <div class="slds-col slds-size_3-of-12 two" draggable="true" ondragstart="{!c.dragStart}">
13.             <div class="slds-text-heading_small">This is second box</div>
14.         </div>
15.         
16.         <div class="slds-col slds-size_3-of-12 three" draggable="true" ondragstart="{!c.dragStart}">
17.             <div class="slds-text-heading_small">This is third box</div>
18.         </div>
19.     </div>
20. </aura:component>

Component_A.js

1. ({
2. dragStart : function(component, event, helper) {
3. event.dataTransfer.setData('innerHTML', event.target.firstElementChild.innerHTML);
4.         event.dataTransfer.setData('classList', event.target.classList.value);
5. }
6. })

Component_A.css

1. .THIS .one, .THIS .two, .THIS .three{
2.     max-height: 90px;
3.     margin: 20px;
4.     padding: 5px;
5.     color: #fff;
6.     cursor: -webkit-grab;
7. }
8. .THIS .one:active, .THIS .two:active, .THIS .three:active{
9.     cursor: -webkit-grabbing;
10. }
11. .THIS .one{
12.     background-color: red;
13. }
14. .THIS .two{
15.     background-color: blue;
16. }
17. .THIS .three{
18.     background-color: green;
19. }

Component_B.cmp

1. <aura:component >
2. <!--attributes-->
3.     <aura:attribute name="columnList" type="List" />
4.     
5.     <!--component markup-->
6.     <div class="slds-text-heading_large slds-p-left_medium">Component B</div>
7.     
8.     <div class="slds-grid slds-wrap drop-zone" aura:id="dropZone" ondragover="{!c.dragoverHandler}" ondragleave="{!c.dragLeaveHandler}" ondrop="{!c.dropHandler}">
9.         <!--iterate the dropped box here-->
10.         <aura:iteration items="{!v.columnList}" var="col">
11.             <div class="{!col.classList}">
12.                 <div class="slds-text-heading_small">{!col.innerHTML}</div>
13.             </div>
14.         </aura:iteration>
15.     </div>
16. </aura:component>

Component_B.js

1. ({
2. dragoverHandler : function(component, event, helper) {
3. event.preventDefault();
4.         var dropZone = component.find("dropZone");
5.         $A.util.addClass(dropZone, 'active');
6. },
7.     
8.     dragLeaveHandler : function(component, event, helper) {
9. event.preventDefault();
10.         var dropZone = component.find("dropZone");
11.         $A.util.removeClass(dropZone, 'active');
12. },
13.     
14.     dropHandler : function(component, event, helper) {
15. event.preventDefault();
16.         var dropZone = component.find("dropZone");
17.         $A.util.removeClass(dropZone, 'active');
18.         
19.         var column = component.get('v.columnList');
20.         var columnAttributes = {};
21.         
22.         columnAttributes.innerHTML = event.dataTransfer.getData("innerHTML");
23.         columnAttributes.classList = event.dataTransfer.getData("classList");
24.         column.push(columnAttributes);
25.         
26.         component.set('v.columnList', column);
27. },
28. })

Component_B.css

1. .THIS .one, .THIS .two, .THIS .three{
2.     max-height: 90px;
3.     margin: 20px;
4.     padding: 5px;
5.     color: #fff;
6.     cursor: pointer;
7. }
8. .THIS .one{
9.     background-color: red;
10. }
11. .THIS .two{
12.     background-color: blue;
13. }
14. .THIS .three{
15.     background-color: green;
16. }
17. .THIS.drop-zone{
18.     box-sizing: border-box;
19.     min-height: 200px;
20.     border-width: 2px;
21.     border-style: dashed;
22.     border-color: transparent;
23.     margin: 20px;
24. }
25. .THIS.active{
26.     border-color: #027FB3;
27. }

App: -

1. <aura:application extends="force:slds" access="GLOBAL" >
2.     
3.     <div class="slds-grid slds-m-bottom_xx-large">
4.         <div class="slds-col">
5.             <c:Component_A />
6.         </div>
7.     </div>
8.     <div class="slds-grid slds-m-bottom_xx-large">
9.         <div class="slds-col">
10.             <c:Component_B />
11.         </div>
12.     </div>
13.     
14. </aura:application>