I am trying to display all records in a card format and trying to drag and drop it in a canvas. When i am trying to drag an element its giving the below error

enter image description here

<aura:component controller="jQueryDrag">
    <ltng:require scripts="{!$Resource.jOrgchart}"
                  afterScriptsLoaded="{!c.doInit}" />
    <ltng:require scripts="{!join(',', 
                           $Resource.bootstrap + '/jquery-3.1.1.slim.min.js', 
                           $Resource.bootstrap + '/bootstrap.min.js')}"/>
    <ltng:require styles="{!$Resource.bootstrap + '/bootstrap.min.css'}" />
    <aura:attribute name="results" type="List"/>
    <aura:attribute name="selTabId" type="String" default="tab1" />
    <aura:handler name="init" value="{!this}" action="{!c.getContacts}"/>
    <aura:attribute name="startId" type="string"/>
    <aura:attribute name="parentId" type="string"/>
    <lightning:tabset >
        <lightning:tab aura:id="tab1" label="Heirarchy" id="one" >
            <div id="tree"></div>    
        <lightning:tab aura:id="tab2" label="Relationship Map" id="two">

            <div class="">
                <div class="row">
                    <div class="col-sm-2">
                        <div style="width:200px;" class="slds-card slds-p-around_small">
                            <aura:iteration items="{!v.results}" var="item">
                                <div ondrop="{!c.drop}" ondragover="{!c.allowDrop}" class="slds-box slds-box_x-small slds-tabs_card element">
                                    <div  id="dragstart" style="cursor: move;" class="slds-p-around_medium" draggable="true" ondragstart="{!c.drag}">{!item.Name}</div>
                    <div class="col-sm-10">
                        <canvas id="myCanvas" width="2000" height="8000" style="border:1px solid #000000;" droppable="true">
        <lightning:tab label="Item Three" id="three">
            Three Content !


    doInit : function(cmp, event, helper) {
    getContacts : function(cmp, event, helper) {
        var action = cmp.get("c.query");
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state == 'SUCCESS') {
                cmp.set('v.results', response.getReturnValue());
     allowDrop: function(cmp, event, helper){
    drag: function(cmp, ev, helper){
          var parentId = document.getElementById(ev.target.id).parentElement.id;
    drop: function(cmp, ev, helper){
        var drag = cmp.get("v.startId");
        var div = ev.target.id;
        var fragment = document.createDocumentFragment();
        var c = document.getElementById(div).children;
        var x = document.getElementById('dragstart').parentElement.id;
        var fragment = document.createDocumentFragment();
  • 1
    Have you seen my gist?
    – sfdcfox
    Commented Jul 3, 2021 at 19:38

1 Answer 1


In the above code you are referring to parentelement at two places.

var parentId = document.getElementById(ev.target.id).parentElement.id;


var x = document.getElementById('drag1').parentElement.id;

In one of these statements the object on which you are referring this property is null. Most probably the second statement. I do not see how you are creating an element with id 'drag1'.

  • Thanks Rajiv. I got the issue . i have updated my fixed code. i have added "dragstart" as Id . Now i am able to drag the elements. Commented Jul 3, 2021 at 17:43

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .