Below is my Aura Component

<aura:component controller="contactClassController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="conWrapper" type="Object"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <div class="slds-box"><h1 align="center" font-size="40px"><b>Active Contacts</b></h1>
        <div ondrop="{!c.onActiveDrop}" ondragover="{!c.onDragOver}">
            <aura:iteration  items="{!v.conWrapper.ActiveContact}" var="con">
                <div draggable="true" ondragstart="{!c.onDragStart}" id="{!con.Id}">
                    <ul class="slds-listbox slds-listbox_horizontal" role="listbox" aria-label="Selected Options:" aria-orientation="horizontal" aria-describedby="listbox-pill-default">
                        <lightning:pill label="{!con.Name}">
                            <aura:set attribute="media">
                                <lightning:icon iconName="standard:contact"  alternativeText="Contact"/>
                            </aura:set>
                        </lightning:pill>  
                    </ul>
                </div>
            </aura:iteration>
        </div>
    </div>
    <br/>
    <div class="slds-box"><h1 align="center" font-size="40px"><b>Inactive Contacts</b></h1>
        <div ondrop="{!c.onInActiveDrop}" ondragover="{!c.onDragOver}">
            <aura:iteration  items="{!v.conWrapper.InActiveContact}" var="con">
                <div draggable="true" ondragstart="{!c.onDragStart}" id="{!con.Id}">
                    <ul class="slds-listbox slds-listbox_horizontal" role="listbox" aria-label="Selected Options:" aria-orientation="horizontal" aria-describedby="listbox-pill-default">
                        <lightning:pill label="{!con.Name}">
                            <aura:set attribute="media">
                                <lightning:icon iconName="standard:contact"  alternativeText="Contact"/>
                            </aura:set>
                        </lightning:pill>  
                    </ul>
                </div>
                
            </aura:iteration>
        </div> 
    </div>
    <lightning:button variant="brand" type="button" name="Save" label="Save" onclick="{!Save}" />
</aura:component>

My lightning pills are arranged vertically and also I want my data to be changed when I click Save button.
Right now they are changing as soon as I DRAG N DROP the pills.

My Controller is

({      doInit : function(component, event, handler) {
    var action = component.get("c.getConStatus");
    //action.setParams({ firstName : component.get("v.firstName") });
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            component.set('v.conWrapper',response.getReturnValue());      
        }
        else if (state === "INCOMPLETE") {
        }
            else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " +
                                    errors[0].message);
                    }
                } else {
                    console.log("Unknown error");
                }
            }
    });
    
    
    $A.enqueueAction(action);
},
  onDragStart :function(component, event, helper) {
      console.log(event.target.id);
      event.dataTransfer.setData('String',event.target.id);
  },
  onDragOver :function(component, event, helper) {
      event.preventDefault();
  },
  onActiveDrop :function(component, event, helper) {
      console.log(event.dataTransfer.getData('String',event.target.id));
      helper.updateDraggedCon(component, event, helper, event.dataTransfer.getData('String',event.target.id),'Active');
      
  },
  onInActiveDrop :function(component, event, helper) {
      console.log(event.dataTransfer.getData('String',event.target.id));
      helper.updateDraggedCon(component, event, helper, event.dataTransfer.getData('String',event.target.id),'InActive');
  },
 })

Apex Class :-

public class contactClassController
{
    @AuraEnabled
    public static ContactWrapper getConStatus(){
        List<Contact> ActiveContact = new List<Contact>();
        List<Contact> InActiveContact = new List<Contact>();
        List<Contact> conList = [SELECT Id, Name, ks82__isActive__c FROM Contact];
        if(conList!=null && conList.size()>0){
            for(Contact con : conList){
                if(con.ks82__isActive__c=='Active'){
                    ActiveContact.add(con);
                }else if (con.ks82__isActive__c=='InActive'){
                    InActiveContact.add(con);
                }
            }
            ContactWrapper cw = new ContactWrapper();
            cw.ActiveContact = ActiveContact;
            cw.InActiveContact = InActiveContact;
            return cw;
        }
        return null;
    }
    public class ContactWrapper{
        @AuraEnabled
        public List<Contact> ActiveContact;
        @AuraEnabled
        public List<Contact> InActiveContact;
    }
    @AuraEnabled
    public static ContactWrapper updateCon(Id conId, String status){
        Contact c= new Contact();
        c.Id = conId;
        c.ks82__isActive__c = status;
        update c;
        return getConStatus();
    }
}

HELPER Controller :-

({
    updateDraggedCon : function(component, event, helper, conId, status ) {
        var action = component.get("c.updateCon");
        action.setParams({ 'conId' : conId,
                          'status' : status});
        
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.ContactWrapper", response.getReturnValue());
            }
            else if (state === "INCOMPLETE") {
            }
                else if (state === "ERROR") {
                    var errors = response.getError();
                    if (errors) {
                        if (errors[0] && errors[0].message) {
                            console.log("Error message: " + 
                                        errors[0].message);
                        }
                    } else {
                        console.log("Unknown error");
                    }
                }
        });
        
        $A.enqueueAction(action);
        var action = component.get("c.getConStatus");
        //action.setParams({ firstName : component.get("v.firstName") });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set('v.conWrapper',response.getReturnValue());      
            }
            else if (state === "INCOMPLETE") {
            }
                else if (state === "ERROR") {
                    var errors = response.getError();
                    if (errors) {
                        if (errors[0] && errors[0].message) {
                            console.log("Error message: " + 
                                        errors[0].message);
                        }
                    } else {
                        console.log("Unknown error");
                    }
                }
        });
        
        
        $A.enqueueAction(action);
    }
})

Please change it accordingly as I want my pill to be arranged Horizontally and everything should change when I click on Save/Submit button