Help with using Dragula in Lightning components

Question

I'm using the 3rd party js library Dragula to develop some drag and drop functionality in a Lightning Component.

See the .cmp file:

<aura:component controller="DragulaController" access="global" implements="force:appHostable,flexipage:availableForAllPageTypes">

<ltng:require   styles="{!$Resource.dragula + '/dragula.css'}"
                scripts="{!$Resource.dragula + '/dragula.js'}"
                afterScriptsLoaded="{!c.afterScriptsLoaded}" />


<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="goalList" type="Goal__c[]" />

<div aura:id="d1" class="slds-box slds-theme--shade">
    <aura:iteration items="{!v.goalList}" var="goal">
        <div id="test" class="slds-box slds-theme--default">
            {!goal.Name}
        </div>
    </aura:iteration>
</div>
<div aura:id="d2" class="slds-box slds-theme--shade">

</div>

And the controller:

({
doInit : function(component, event, helper) {

    //grab the data from the server

    helper.getRecords(component, event);

},

afterScriptsLoaded : function(component, event) {

    //do the dragula bits
    dragula([component.find("d1"),component.find("d2")]);
} )}

now this renders okay, but the drag n drop functionality just isn't activated - definitely something wrong with the way i'm calling these screen elements. Has anyone worked with this library before? If I remove the "component.find" bits and just pass d1,d2 into the Dragula function, it appears to work, but it fails if I try to extend it with the options object.

How should I be referencing these screen elements and using this dragula function?

Answer 1

updated controller file that works:

({
doInit : function(component, event, helper) {

    //grab the data from the server

    helper.getRecords(component, event);

},

afterScriptsLoaded : function(component, event) {

    //do the dragula bits
    dragula([component.find("d1").getElement(),component.find("d2").getElement()], {
      copy: function (el, source) {
        return source === component.find("d1").getElement()
      },
      accepts: function (el, target) {
        return target !== component.find("d1").getElement()
      }
    });
}})