0

Hello I am trying to handle an event in my lightning component between 2 items being dragged and dropped onto another.

My event seems to be firing, however it is not being handled as the function that is supposed to be called by the action parameter is not returning any console messages.

Component with the register.

<aura:component >
<!-- Custom Events -->
<aura:registerEvent name="cardSwapRegister" type="c:CardSwap"/>

Controller that fires the event

onDrop: function(component, event, helper)
{
    event.preventDefault();
    var cardSwapEvent = component.getEvent('cardSwapRegister');
    cardSwapEvent.setParams({'seatName': component.get('v.seatName'),
                             'seatId': component.get('v.seatId'),   
                             'item': JSON.parse(event.dataTransfer.getData('text'))});

    console.log("Target Seat Name: ", component.get('v.seatName'));
    console.log("Target Seat Id: ", component.get('v.seatId'));

    cardSwapEvent.fire()
}

CardSwap.evt

<aura:event type="COMPONENT" description="Event fired when 2 cards collide with each other">
    <aura:attribute name="item" type="Object" required="true"></aura:attribute>
    <aura:attribute name="seatName" type="String" required="true"></aura:attribute>
    <aura:attribute name="seatId" type="String" required="true"></aura:attribute>
</aura:event>

Component/Handler

<aura:component controller="DragDropApexController" >
    <aura:handler name="cardSwapped" event="c:CardSwap" action=" 
    {!c.onPersonMoved}"></aura:handler>
</aura:component>

Controller that is not being called by the handler

onPersonMoved: function(component, event, helper)
{
    console.log("Swapping...");

    var item = event.getParam("item"); //This is the item that was moved.

    //Code here to swap the seat information
    //z = x;
    //x = y;
    //y = z;
},
  • 4
    At least where I work, we strongly advise against using var any more. Use const or let instead. – Adrian Larson Oct 11 '18 at 15:41
  • 1
    @AdrianLarson Unless, like us, we're forced to continue IE 11 support... – sfdcfox Oct 11 '18 at 16:20
  • @sfdcfox Actually all the clients I work with force us to support IE11. As much as the browser does not support, it does work with both const and let. So why would that be relevant? – Adrian Larson Oct 11 '18 at 16:49
  • @AdrianLarson IE 11 is buggy with let, though, with a note saying "let variables are not bound separately to each iteration of for loops" caniuse.com. So, one still needs to be careful about potential side effects. – sfdcfox Oct 11 '18 at 16:52
1

The <aura:handler> tag must use the same value of the name attribute from the <aura:registerEvent> tag in your component. You have name=cardSwapRegister while registering and name=cardSwapped while handling.

So changing your handler like so should make it work:

<aura:handler name="cardSwapRegister" event="c:CardSwap" action="{!c.onPersonMoved}"/>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.