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="{!item.id}" 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('drag1').parentElement.id;
var fragment = document.createDocumentFragment();
fragment.appendChild(document.getElementById(c[0].id));
document.getElementById(cmp.get("v.parentId")).appendChild(fragment);
}
}
})
