drag drop across iFrame using Angular Directive

Question

I need some controls to work with Drag & Drop across iFrame. the reason i need the functionality in an iframe is because its a CMS that we are building and the any "absolute" css changes in the "editing page" will impact the main site as well.

Ive written a angular directive and built a small prototype as well for this and it works perfect as long as its on the same page, but the moment i try to do the same across iframes, it just does not works. even registering the droppbale from the iFrame page does not shows up in console (when trying to log through directive).

its a 1 pager code and available for viewing here - http://78.110.163.229/angDnd/outer.html

any guidance / advice would be extremely helpful.

Answer 1

It seems that the iframe's body is never actually made droppable. There is this piece of code in the body:

$(function () {
    $("#canvas-frame").ready(function (){
        var contents = $("#ifr").contents();
        var ifrBody = contents.find('body');
        //console.log(ifrBody);
        $(ifrBody).attr("dnd-droppable","true");
    })
});

(Some of) the problems with it are the following:

1. I don't see any #canvas-frame element.

2. Even if there were one such element, the dnd-droppable attribute is added to the iframe's body after angular has parsed the DOM, so it is not taken into account at all.

---

Solution:

In your HTML, add a new directive on the iframe element:

<iframe id="ifr" src="inner.html" dnd-droppable-iframe></iframe>

In your JS, define the new directive so that it waits for the iframe to be loaded, then adds the dndDroppable directive to its body element and compile's it, so Angular can "pick it up":

dndApp.directive('dndDroppableIframe', function ($compile) {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            if (elem.prop('tagName') !== 'IFRAME') { return; }

            elem.ready(function () {
                var ifrBody = elem.contents().find('body');
                ifrBody.attr('dnd-droppable', '');
                $compile(ifrBody)(scope);
            });
        }
    };
});