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][1]][1]


  [1]: https://i.sstatic.net/ssHo1.png

    <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);
        }
    }
     })