Hi,
  Can anyone help me in getting the drag and drop work in lightning app? I have put div elements withing which I have image elements. I am able to drag and drop the image. But what I want is when I drag and drop one image on other, those two images should get swapped. I have written the javascript code to make work. But I am getting Error as Access Denied.

<div ondrop="{!c.drop}" ondragover="{!c.allowDrop}" id="{!v.appItem.label+'div'}">
<p ondragstart="{!c.drag}" draggable="true" id="{!v.appItem.label}">
<img src="{!v.appItem.logoURL}"  alt="{!v.appItem.altText}" id="{!v.appItem.label+'img'}"/>
</p>
</div>

 

"drag": function(cmp, event, helper){
        var source_paraid = document.getElementById(event.target.id).parentElement.id;
        var sourceHTML = document.getElementById(source_paraid).parentElement.innerHTML;
        var source_divid = document.getElementById(source_paraid).parentElement.id;
        event.dataTransfer.setData("html", sourceHTML);
        event.dataTransfer.setData("divid", source_divid);
    },
    "allowDrop": function(cmp, event, helper){
        event.preventDefault();
    },
    "drop": function(cmp, event, helper){
	event.preventDefault();
    var sourceDivId = event.dataTransfer.getData("divid");
    var target_paraid = document.getElementById(event.target.id).parentElement.id;
    var targetDivId = document.getElementById(target_paraid).parentElement.id;
    var targetObj = document.getElementById(target_paraid);
    var sourceObj = document.getElementById(sourceDivId).children;
    document.getElementById(targetDivId).removeChild(targetObj);
    document.getElementById(targetDivId).appendChild(sourceObj);
    document.getElementById(sourceDivId).removeChild(sourceObj);
    document.getElementById(sourceDivId).appendChild(targetObj);
    }

I am getting that error when I use appendChild method.

Please help me out. 

Thanks in advance