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
2 Comments
The code in the video is different, where is the static resource file s shown in the code above.
ReplyDeleteHere it is,
Deletehttps://www.digitalocean.com/community/tutorials/js-drag-and-drop-vanilla-js