Apex Code Development You need to sign in to do that
Don't have an account?
Bhavana 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
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
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