+ Start a Discussion
Bhavana VemulaBhavana Vemula 

I want rows of one component to be dragged and dropped onto other component

Hi,
I have used the below drop function to drop row of one component on to the other component dynamically it does not work
drop: function(cmp, ev, helper){
        var parentId='div1';
        var drag = cmp.get("v.startId");
        var div = ev.target.id;
        var fragment = document.createDocumentFragment();
        fragment.appendChild(document.getElementById(drag));
        document.getElementById(div).appendChild(fragment);
        var c = document.getElementById(div).children;
        var x = document.getElementById('drag1').parentElement.id;
        var fragment = document.createDocumentFragment();
        fragment.appendChild(document.getElementById(c.id));
        document.getElementById(cmp.get("v.parentId")).appendChild(fragment);
    }

do any one have idea
sindhura (Heptarc)sindhura (Heptarc)
Hi Bhavana,
Find the below syntax for dragging and dropping:
<!-- pipeline.cmp -->
<aura:component >
    <!-- Attributes -->
    <aura:attribute name="title" type="String" required="true"></aura:attribute>
    <aura:attribute name="items" type="Object[]" required="true"></aura:attribute>
    
    <!-- Custom Events -->
    <aura:registerEvent name="pipelineChange" type="c:pipelineChange"/>
    
    <div class="column" ondrop="{!c.onDrop}" ondragover="{!c.allowDrop}">
        <div class="panel">
            <div class="panel-heading">
{! v.title }
            </div>
            <div class="panel-block column">
                <aura:iteration items="{!v.items}" var="item">
                    <aura:if isTrue="{!item.status == v.title}">
                     <c:Card item="{!item}"></c:Card>
                    </aura:if>    
                </aura:iteration>
            </div>
        </div>
    </div>
</aura:component>

Controller:
<!-- pipelineController.js -->
({
 allowDrop: function(component, event, helper) {
        event.preventDefault();
    },
    
    onDrop: function(component, event, helper) {
        event.preventDefault();
        var pipelineChangeEvent = component.getEvent('pipelineChange');
        pipelineChangeEvent.setParams({
 'title': component.get('v.title'),
            'item': JSON.parse(event.dataTransfer.getData('text'))
        });
        pipelineChangeEvent.fire();
        
    },
})

Hope this would be help you.
Thank you