I am creating a lightning component where i have to I have iterated over list of Radio button results with label.

Now what i want to do is to Have a drag and drop functionality on those selected results from where i only want to choose only 5 of those 12 radio results , and then save those 5 into  5 different text fields of an object.

Here is my aura component code:-

<aura:component controller="OpportunityFetchField">
    <aura:attribute name="newOpportunity" type="Opportunity"
                    default="{ 'sobjectType': 'Opportunity',
                             'Name': '',
                             'StageName' :'',
                             'CloseDate' : '',
                             'Priority_1__c' :'',
                             'Priority_2__c' : '',
                             'Priority_Date_1__c' : '',
                             'Priority_Date_1__c' : ''
                             }"/>
    <aura:attribute name="stageList" type="List"/>
    <aura:attribute name="objName" type="String" default="Opportunity"/>
    <aura:attribute name="fldName" type="String" default="StageName"/>
    <aura:attribute name="today" type="Date" default=""/>
    <aura:attribute name="listOne" type="List" default="['CONVENIENCE','COST-EFFECTIVENESS', 'YIELD']"/>
    <aura:attribute name="listTwo" type="List" default="['CREDIT CARDS','DEBT RESTRUCTURE', 'ACCESS TO LIQUIDITY']"/>
    <aura:attribute name="listThree" type="List" default="['EMERGENCY FUND','MAJOR PURCHASES ', 'RETIREMENT']"/>
    <aura:attribute name="listFour" type="List" default="['ACCOUNT PROTECTION','INSURANCE COVERAGES', 'ESTATE PLANNING']"/>
    
    <aura:attribute name="selectedList" type="List"/>    
    <aura:attribute name="buttonSelected" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    
    <div class="slds-page-header">
        <!-- COMPANY LOGO -->
    </div>
    
    <div class="tab">
        <div class="slds-col slds-size_1-of-12">
            
            <div><lightning:button variant="{!v.buttonSelected == 'A' ? 'brand':'neutral'}" label="BANK" name="A" onclick="{!c.buttonHandler}"/> </div>
            <div><lightning:button variant="{!v.buttonSelected == 'B' ? 'brand':'neutral'}" label="BORROW" name="B" onclick="{!c.buttonHandler}"/> </div>
            <div><lightning:button variant="{!v.buttonSelected == 'C' ? 'brand':'neutral'}" label="PLAN" name="C" onclick="{!c.buttonHandler}"/> </div>
            <div><lightning:button variant="{!v.buttonSelected == 'D' ? 'brand':'neutral'}" label="PROTECT" name="D" onclick="{!c.buttonHandler}"/> </div> 
            <div><lightning:button variant="{!v.buttonSelected == 'E' ? 'brand':'neutral'}" label="PRIORITIZE" name="E" onclick="{!c.buttonHandler}"/> </div>
            
        </div>
    </div>
    
    <div class="slds-col slds-size_3-of-12">
        <aura:if isTrue="{!v.buttonSelected == 'A'}">
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>Yes</th> 
                        <th>No</th>
                        <th>Don't Know</th>
                    </tr>
                </thead>
                <tbody>
                    <aura:iteration items="{!v.listOne}" var="item">
                        <tr>
                            <td><strong>{!item}</strong></td>
                            
                            <td><input type="radio" name="{!item}" value="Yes"  onchange="{!c.radioHandler}"/></td>
                            <td><input type="radio" name="{!item}" value="No"  onchange="{!c.radioHandler}"/></td>
                            <td><input type="radio" name="{!item}" value="Don't Know"  onchange="{!c.radioHandler}"/></td>
                            
                        </tr>
                    </aura:iteration>
                    
                </tbody>
            </table>
        </aura:if>
        <aura:if isTrue="{!v.buttonSelected == 'B'}">
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>Yes</th> 
                        <th>No</th> 
                        <th>Don't Know</th>
                    </tr>
                </thead>
                <tbody>
                    <aura:iteration items="{!v.listTwo}" var="item">
                        <tr>
                            <td><strong>{!item}</strong></td>
                            <td><input type="radio" name="{!item}" value="Yes" onchange="{!c.radioHandler}"/></td>
                            <td><input type="radio" name="{!item}" value="No" onchange="{!c.radioHandler}"/></td>
                            <td><input type="radio" name="{!item}" value="Don't Know" onchange="{!c.radioHandler}"/></td> 
                        </tr>
                    </aura:iteration>
                </tbody>
            </table>
        </aura:if>
        <aura:if isTrue="{!v.buttonSelected == 'C'}">
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>Yes</th> 
                        <th>No</th>
                        <th>Don't Know</th>
                    </tr>
                </thead>
                <tbody>
                    <aura:iteration items="{!v.listThree}" var="item">
                        <tr>
                            <td><strong>{!item}</strong></td>
                            <td><input type="radio" name="{!item}" value="Yes" onchange="{!c.radioHandler}"/></td>
                            <td><input type="radio" name="{!item}" value="No" onchange="{!c.radioHandler}"/></td>
                            <td><input type="radio" name="{!item}" value="Don't Know" onchange="{!c.radioHandler}"/></td> 
                        </tr>
                    </aura:iteration>
                </tbody>
            </table>
        </aura:if>
        
        <aura:if isTrue="{!v.buttonSelected == 'D'}">
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>Yes</th> 
                        <th>No</th> 
                        <th>Don't Know</th>
                    </tr>
                </thead>
                <tbody>
                    <aura:iteration items="{!v.listFour}" var="item">
                        <tr>
                            <td><strong>{!item}</strong></td>
                            <td><input type="radio" name="{!item}" value="Yes" onchange="{!c.radioHandler}"/></td>
                            <td><input type="radio" name="{!item}" value="No" onchange="{!c.radioHandler}"/></td>
                            <td><input type="radio" name="{!item}" value="Don't Know" onchange="{!c.radioHandler}"/></td>  
                        </tr>
                    </aura:iteration>
                </tbody>
            </table>
        </aura:if>
    </div>
    
    
    <!--  Here is the code of Iterated values of All Radio Buttons  -->    
    <aura:if isTrue="{!v.buttonSelected == 'E'}">  
        <div class="sourcebox">
            
            <h3><strong>PRIORITIZE</strong></h3> <br></br><br></br>
            
            <aura:iteration items="{!v.selectedList}" var="item">
                <div  ondragstart="{!c.dragStart}" ondragover="{!c.allowDrop}" draggable="true" id="drag1">  
                    {!item.label} - {!item.value}
                </div>
                <br></br>
            </aura:iteration>
        </div>

*****************************************************************************************
JS Controller:-
  
    dragStart : function(component, event, helper){
        // console.log(event.target.id);
        // event.currentTarget.style.border = "dashed";
        event.dataTransfer.setData("text", event.target.id);
    },
    allowDrop : function(component, event, helper){
        event.preventDefault();
    },
    OnNewDrop : function(component, event, helper){
        var data = event.dataTransfer.getData("text");
        alert(data);
        // var texteSelectionne = document.createTextNode(data);
        // event.target.appendChild(texteSelectionne);
        
        event.target.appendChild(document.getElementById(data));
        event.dataTransfer.clearData();
        
    }