Make dropped element again droppable indisde Iframe using Jquery

Make dropped element again droppable indisde Iframe using Jquery

Hi guys. I trying to develop an web editor tool using Iframe and Jquery. I am trying to do drag and drop inside Iframe. What I want is that I drag and element into the Iframe and I want that element to be again droppable area inside an Iframe. As simple I want all elements to be droppable inside an I frame.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <title>Play It</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="jqueryui/jquery-ui.css">
    <style>
        .drag {
            background: yellow;
            padding: 20px;
            width: 200px;
        }
    </style>
</head>

<body>

    <div class="container-fluid">
        <div class="row h-100">
            <div class="col-6">
                <div id="drag" class="bg-warning p-3" style="border:solid 1px">
                    test
                </div>
            </div>
            <div class="col-6">
                <iframe id="Iframe" src="IFrame.html" width="100%" height="800">
                </iframe>
            </div>
        </div>
    </div>

    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="jqueryui/jquery-ui.js"></script>
    <script src="jquery-ui-droppable-iframe-master/jquery-ui-droppable-iframe.js"></script>
    <script>
        var $content;
        $("#Iframe").on('load', function() {
            console.log('loaded');
            $content = $(this).contents();
            test($content);


            $content.find('body').on('mouseover', '*', function(e) {
                console.log('mouseover');
                $(this).css('background-color', 'red');
                e.stopPropagation();
            })
            $content.find('body').on('mouseout', '*', function(e) {
                console.log('mouseover');
                $(this).css('background-color', '');
                e.stopPropagation();
            })
            $content.find('body').on('click', '*', function(e) {
                console.log('click');
                $(this).css('background', 'green');
                e.stopPropagation();
            })

        });
        //Activate droppable zones
        function test(x) {
            $(x).find('body').children('*').droppable({
                accept: '*',
                greedy: true,
                drop: function(event, ui) {
                    console.log('came in');
                    $(this).append(ui.draggable.clone());
                    $('Iframe').trigger('load');
                }
            });
        }


        $('#drag').draggable({
            appendTo: "body",
            containment: "window",
            cursor: "move",
            revert: true,
            helper: "clone",
            scroll: false,
            iframeFix: true, //Core jquery ui params needs for fix iframe bug
            iframeScroll: true
        });
    </script>

</body>

</html>


IFrame.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd"><html style="opacity: 1;"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <meta content="width=device-width, initial-scale=1.0" name="viewport">
   <link rel="stylesheet" href="css/bootstrap.min.css">
   <title>Njoy</title>
    <style>

    </style>
</head>
<body bgcolor="#e6e6e6" style="margin: 0px; padding: 0px;">
    <div class=" p-4">
    iframe
    <div class=" p-4">iframe</div>
    </div>
    <div class=" p-4">iframe</div>
</body>
</html>