Drag and Drop tasks like Trello in Salesforce

Kapil January 09, 2021

 In this blog you will learn to create Drag & Drop functionality in a custom Lightning Component Salesforce. Please follow below code and feel free to modify it as per your requirement.

Style.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.example-parent {
  border: 2px solid #DFA612;
  color: black;
  display: flex;
  font-family: sans-serif;
  font-weight: bold;
}

.example-origin {
  flex-basis: 100%;
  flex-grow: 1;
  padding: 10px;
}

.example-draggable {
  background-color: #4AAE9B;
  font-weight: normal;
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 10px;
}

.example-dropzone {
  background-color: #6DB65B;
  flex-basis: 100%;
  flex-grow: 1;
  padding: 10px;
}


Component

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <ltng:require styles="{!$Resource.draganddropcss}" />
    <div class="example-parent">
         <div class="example-origin">
            To-do
            <div
                 id="draggable-1"
                 class="example-draggable"
                 draggable="true"
                 ondragstart="{!c.onDragStart}"
                 >
                thing 1
            </div>
            <div
                 id="draggable-2"
                 class="example-draggable"
                 draggable="true"
                 ondragstart="{!c.onDragStart}"
                 >
                thing 2
            </div>
            <div
                 id="draggable-3"
                 class="example-draggable"
                 draggable="true"
                 ondragstart="{!c.onDragStart}"
                 >
                thing 3
            </div>
            <div
                 id="draggable-4"
                 class="example-draggable"
                 draggable="true"
                 ondragstart="{!c.onDragStart}"
                 >
                thing 4
            </div>
        </div>
        
        <div
             class="example-dropzone"
             ondragover="{!c.onDragOver}"
             ondrop="{!c.onDrop}"
             >
            Done
        </div>
    </div>
</aura:component>


Controller

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
({
	myAction : function(component, event, helper) {
		
	},
    onDragStart :function(form,event) {
        event
        .dataTransfer
        .setData('text/plain', event.target.id);
        
        event
        .currentTarget
        .style
        .backgroundColor = 'yellow';
    },
    onDragOver : function (from,event) {
        event.preventDefault();
    },
    onDrop:function (form,event) {
        const id = event
        .dataTransfer
        .getData('text');
        const draggableElement = document.getElementById(id);
        const dropzone = event.target;
        dropzone.appendChild(draggableElement);
        event
        .dataTransfer
        .clearData();
        
    }
})


Checkout complete tutorial below : 


 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Keep Coding 
Tags:

Post a Comment

2 Comments

  1. PerfectDevSeptember 29, 2021 at 11:13 AM

    The code in the video is different, where is the static resource file s shown in the code above.

    ReplyDelete
    Replies
    1. KapilSeptember 30, 2021 at 2:46 AM

      Here it is,
      https://www.digitalocean.com/community/tutorials/js-drag-and-drop-vanilla-js

      Delete