try to drag drop records from one section to dropzone - aura

Question

I am trying to achieve drag n drop records from one section to a dropzone. Below is my code. Here after dragging the card (record) comes back to the source section and doesn't get dropped in dropzone. How to achieve this.

<div class="stageContainer" style="width:100%">
        <ul  class="slds-has-dividers_around-space pos" style="height:100%;overflow-y:auto;">
               <aura:iteration var="objRecord" items="{!v.ContactData.records}" indexVar="index">
                    <li data-drag-id="{!index}" class="slds-item slds-m-around_small" draggable="true" ondragstart="{!c.drag}" id="{!objRecord.Id}">
                        <article class="slds-tile slds-tile_board">
                            <h3 class="slds-truncate" title="{!objRecord.Name}">
                                <a href="javascript:void(0);" onclick="{!c.doView}">
                                    <span class="slds-truncate" id="{!objRecord.Id}">{!objRecord.Name}</span>
                                </a>
                            </h3>
                        </article>
                    </li>

            </aura:iteration>
        </ul>
    </div>    
</div>  

Test

controller

allowDrop: function(component, event, helper) {
        event.preventDefault();
    },
    
    drag: function (component, event, helper) {
        event.dataTransfer.setData("text", event.target.id);

    },
    
    drop: function (component, event, helper) {
        var data = event.dataTransfer.getData("text");
        var tar = event.target;
        var draggedElement = component.find('data-drag-id');
        event.target.appendChild(draggedElement);
        event.preventDefault();
    }

Answer 1

    var draggedElement = component.find('data-drag-id');

SecureComponent#find finds any elements with a given aura:id, which you're not using here. In addition, these values can't be dynamic.

You can see my example code in a gist.

Here's the relevant parts:

<div class="droparea" 
     ondragover="{!c.cancel}" 
     ondragenter="{!c.cancel}"
     ondrop="{!c.drop}">
    <aura:iteration items="{!v.values}"
                    indexVar="index"
                    var="value">
        <div class="row" 
             draggable="true"
             ondragstart="{!c.dragstart}"
             data-drag-id="{!index}">
            {!value}
        </div>
    </aura:iteration>
</div>

---

dragstart: function(component, event, helper) {
    component.set("v.dragid", event.target.dataset.dragId);
},
drop: function(component, event, helper) {
    var dragId = component.get("v.dragid"),
        values = component.get("v.values"),
        temp;
    temp = values[dragId];
    values[dragId] = values[event.target.dataset.dragId];
    values[event.target.dataset.dragId] = temp;
    component.set("v.values", values);
    event.preventDefault();
},
cancel: function(component, event, helper) {
    event.preventDefault();
}