Drag Drop records in canvas giving error Aura lightning

Question

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

<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>
        <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>
                            </aura:iteration>
                        </div>
                    </div>
                    <div class="col-sm-10">
                       
                        <canvas id="myCanvas" width="2000" height="8000" style="border:1px solid #000000;" droppable="true">
                            
                            
                        </canvas>
                    </div>
                </div>
            </div>
            
        </lightning:tab>
        <lightning:tab label="Item Three" id="three">
            Three Content !
        </lightning:tab>
    </lightning:tabset>
</aura:component>

Controller

({
    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());
            }
        });
        $A.enqueueAction(action);
    },
     allowDrop: function(cmp, event, helper){
        event.preventDefault();
    },
    drag: function(cmp, ev, helper){
          var parentId = document.getElementById(ev.target.id).parentElement.id;
        cmp.set("v.startId",ev.target.id);
        cmp.set("v.parentId",parentId);
    },
    drop: function(cmp, ev, helper){
        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('dragstart').parentElement.id;
        var fragment = document.createDocumentFragment();
        fragment.appendChild(document.getElementById(c[0].id));
        document.getElementById(cmp.get("v.parentId")).appendChild(fragment);
    }
}
 })

Answer 1

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

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

and

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'.