Untitled


<!-- saved from url=(0039)http://78.110.163.229/angDnd/outer.html -->
<html ng-app="dndApp" class="ng-scope"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}</style>
    <title>Drag Drop iFrame using Angular JS Directive</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

    <style>
        #tools-group li{float:left;width:25%;padding-right:5px;list-style: none;height:60px;border: 1px solid #000;margin-right:4px;margin-top:5px;background-color: #efefef}
        #onPageDiv{height:0px;border:1px solid #000000;background-color: #efefef}
        #ifrContainer{height:100%;left:0;

        }
        #ifr{width:100%;height: 100%}
        .drag-active {z-index: 2;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity = 100);opacity: 1;}
        .drop-hover{ border: 4px dashed #51b62b; }


        /* ===========================
            #NEW CSS
        ============================ */

        .droppable-fake { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
        .iframe-holder { position: relative; }

        #ifrContainer {
            -webkit-transform: scale(.5);
               -moz-transform: scale(.5);
                -ms-transform: scale(.5);
                 -o-transform: scale(.5);
                    transform: scale(.5);
        }
    </style>
</head>
<body style="">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
               <!-- <h2>Droppable on the page - <span class="alert alert-success">works perfect :-)</span> </h2>
                <div id="onPageDiv" data-greedy="false">

                </div>-->
                <h2>Droppable on iFrame</h2>

                <div class="iframe-holder">
                    <div id="ifrContainer">
                        <iframe id="ifr" src="./Drag Drop iFrame using Angular JS Directive_files/inner.html" dnd-droppable-iframe=""></iframe>
                    </div>

                    <div class="droppable-fake"></div><!-- /.dropppable-fake -->
                </div><!-- /.iframe-holder -->
            </div>
            <div class="col-md-4">
                <h2>Draggables</h2>
                <ul id="tools-group">
                    <li data-raw="&lt;div class=&#39;well&#39; dnd-draggable dnd-droppable&gt;&lt;/div&gt;" data-helper="clone" dnd-draggable="" class="ui-draggable"><i class="glyphicon  glyphicon-adjust"></i>Drag 1</li>
                    <li data-raw="&lt;div class=&#39;alert alert-success&#39; dnd-draggable dnd-droppable&gt;&lt;/div&gt;" data-helper="clone" dnd-draggable="" class="ui-draggable"><i class="glyphicon  glyphicon-adjust"></i>Drag 2</li>
                    <li data-raw="&lt;div class=&#39;alert alert-danger&#39; dnd-draggable dnd-droppable&gt;&lt;/div&gt;" data-helper="clone" dnd-draggable="" class="ui-draggable"><i class="glyphicon  glyphicon-adjust"></i>Drag 3</li>
                    <li data-raw="&lt;div class=&#39;alert alert-warning&#39; dnd-draggable dnd-droppable&gt;&lt;/div&gt;" data-helper="clone" dnd-draggable="" class="ui-draggable"><i class="glyphicon  glyphicon-adjust"></i>Drag 4</li>
                    <li data-raw="&lt;a class=&#39;btn btn-default&#39; dnd-draggable&gt;Button&lt;/a&gt;" data-helper="clone" dnd-draggable="" class="ui-draggable"><i class="glyphicon  glyphicon-adjust"></i>Drag 5</li>
                </ul>
            </div>
        </div>

    </div>
    <script src="./Drag Drop iFrame using Angular JS Directive_files/jquery-2.0.3.min.js"></script>
    <script src="./Drag Drop iFrame using Angular JS Directive_files/jquery-ui.js"></script>
    <script src="./Drag Drop iFrame using Angular JS Directive_files/angular.min.js"></script>
    <script src="./Drag Drop iFrame using Angular JS Directive_files/app.js"></script>


</body></html>