Lightning component with drag and drop functionality to delete records.

In the following example, we will see how to implement 'drag and drop' feature in lightning component. We will see a small example to implement this, I am using standard contact object and I will try to fetch the contacts in my component and delete one contact by dragging and dropping the contact into a recycle bin.

Screenshots: -

Apex: -

public class getContact {
 @AuraEnabled
 public static List<Contact> getContactList(){
 List<Contact> con = [SELECT Id, Name, Email FROM Contact];
 return con;
 }
 @AuraEnabled
 public static void deleteContact(String contactId){
 contact[] con = [SELECT Id,Name FROM Contact WHERE Id =: contactId];
 try{
 delete con;
 }
 catch (DmlException e){
 }
 }

}

Component: -

ListOfContact.cmp

<aura:component controller="getContact">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="contact" type="Object" />
    
    <lightning:layout>
        <lightning:layoutItem size="8">
            <lightning:card title="Contacts" iconName="standard:contact">
                <aura:iteration items="{!v.contact}" var="con" indexVar="index">
                    <lightning:layoutItem size="8">
                        <c:contactTile contact="{#con}" index="{#index}" />
                    </lightning:layoutItem>
                </aura:iteration>
            </lightning:card>
        </lightning:layoutItem>
        
        <lightning:layoutItem size="4" padding="around-medium">
            <c:recycleBin />
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

ListOfContact.js

({
	doInit : function(component, event, helper) {
		var action = component.get('c.getContactList');
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === 'SUCCESS'){
                component.set('v.contact', response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
	}
})

ListOfContact.css

.THIS .bin{
    background: #ccc;
}

contactTile.cmp

<aura:component >
    <aura:attribute name="contact" type="Contact" />
    <aura:attribute name="index" type="Integer" />
    
    <div id="{#v.contact.Id}" draggable="true" ondragstart="{!c.handleDrag}">
        <lightning:layout verticalAlign="center" multipleRows="true">
            <lightning:layoutItem padding="around-small">
                <lightning:icon iconName="utility:rows" size="x-small" />
            </lightning:layoutItem>
            <lightning:layoutItem padding="around-small">
                <div class="slds-text-heading_small">{#v.contact.Name}</div>
                <div class="slds-text-heading_small">{#v.contact.Email}</div>
            </lightning:layoutItem>
        </lightning:layout>
    </div>
</aura:component>

contactTile.js

({
	handleDrag : function(component, event, helper) {
		var contact = component.get('v.contact');
        var id = contact.Id;
        var dom = document.getElementById(id);
        dom.classList.add('ccc');
        event.dataTransfer.setData("contact", JSON.stringify(contact));
	}
})

recycleBin.cmp

<aura:component controller="getContact">
    <aura:attribute name="binVariant" type="String" default="warning" />
    
    <div aura:id="dropZone" class="drop-zone" ondragover="{!c.dragOverHandler}" ondragleave="{!c.dragLeaveHandler}" ondrop="{!c.handleDrop}">
        <lightning:icon iconName="utility:recycle_bin_empty" variant="{!v.binVariant}" size="large" />
    </div>
</aura:component>

recycleBin.js

({
	dragOverHandler : function(component, event, helper) {
		event.preventDefault();
        component.set('v.binVariant', 'error');
        var cmpTarget = component.find("dropZone");
        $A.util.addClass(cmpTarget, 'active');
	},
    
    dragLeaveHandler : function(component, event, helper) {
		event.preventDefault();
        component.set('v.binVariant', 'warning');
        var cmpTarget = component.find("dropZone");
        $A.util.removeClass(cmpTarget, 'active');
	},
    
    handleDrop : function(component, event, helper) {
		event.preventDefault();
        var contact = event.dataTransfer.getData("contact");
        var action = component.get('c.deleteContact');
        action.setParams({'contactId': JSON.parse(contact).Id});
        
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === 'SUCCESS'){
                alert('The contact deleted successfully');
            }
        });
        $A.enqueueAction(action);
	},
})

recycleBin.css

.THIS {
    cursor: grab;
    width: 100%;
    transform: scaleX(1) translateZ(0);
    transform-origin: 50% 0;
}
.THIS:hover {
    background: aliceblue;
}
.THIS.ccc {
    transform: scaleX(0) translateZ(0);
    transition: transform 0.3s;
}

App: -

<aura:application extends="force:slds" access="GLOBAL" >
    
    <div class="slds-m-around--small">
        <c:ListOfContact />
    </div>
    
</aura:application>