[
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2016 Kshitiz Shankar\nhttps://github.com/kshitizshankar\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "##Building a Drag-n-Drop Interface\nDrag and drop is almost a goto way for various user interactions. More often than not, drag and drop functionality required is quite simple and easily solved by jQuery UI or other frameworks. Things start to get murky when you are working with an iframe (as always!) or need to mould the drag and drop to your needs.\n\nThankfully, HTML5 brought a native way to handle drag and drop events which should have made things simpler but that wasn’t the case. HTML5 Drag and Drop is still quite raw and full of gray areas. It doesn’t help that debugging drag and drop is quite painful most of the times.\n\nCreating a Drag and Drop interface (like StackHive) required a lot of fiddling around with the HTML5 DnD API. After a lot searching around for articles and resources that would be more relevant for my use case, I came up short. So, after spending a lot of time on it I decided to roll it out as an open source plugin.\n\n##Full Article at - http://blog.stackhive.com/post/137799349684/building-a-seamless-drag-and-drop-interface\n##DEMO at - http://stackhive.com/blogdemos/dragdrop/demointerface.html\n"
  },
  {
    "path": "assets/css/demointerface.css",
    "content": "html, body { height: 100%; padding: 0px; margin: 0px; overflow: hidden;}\r\n#stackhive-placement\r\n{\r\n    position: fixed;\r\n    top:0px;\r\n    width: 100%;\r\n    background-color: white;\r\n    height: 50px;\r\n}\r\n.navbar\r\n{\r\n    height: 55px;\r\n    background-color: rgba(254, 254, 254, 0.95);\r\n    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.13);\r\n    border: none;\r\n}\r\n.navbar-brand\r\n{\r\n    padding-top: 0px;\r\n    padding-bottom: 0px;\r\n    height: 35px;\r\n    margin-top: 8px;\r\n    position: relative;\r\n    left: 10px;\r\n}\r\n.navbar-brand > img\r\n{\r\n    height: 100%;\r\n}\r\n\r\na.btn,a.btn:hover.a.btn:active;\r\n{\r\n    outline:none;\r\n}\r\n.navbar .navbar-nav > li > a\r\n{\r\n    /* border-left:solid 1px #d8d8d8; */\r\n    color:#3d3d3d;\r\n    font-family: 'Roboto Condensed', sans-serif;\r\n    font-size: 18px;\r\n}\r\n\r\n.navbar .navbar-nav > li:last-child > a\r\n{\r\n    /* border-right:solid 1px #d8d8d8; */\r\n}\r\n.navbar .navbar-nav > li > a.stackhive-btn\r\n{\r\n    border:none;\r\n    background-color: rgb(214, 3, 76);\r\n    color: white;\r\n    /* padding: 8px; */\r\n    /* font-size: 15px; */\r\n    /* margin-top: 8px; */\r\n    padding-left: 20px;\r\n    padding-right: 20px;\r\n}\r\n.navbar .navbar-nav > li > a.stackhive-btn i\r\n{\r\n    transition:.3s all;\r\n    font-size: 15px;\r\n    margin-left: 2px;\r\n}\r\n.navbar .navbar-nav > li > a.stackhive-btn:hover i\r\n{\r\n    transform: translateX(5px);\r\n}\r\n.navbar .navbar-nav > li > a.github-btn\r\n{\r\n    border:none;\r\n    background-color: rgb(18, 56, 79);\r\n    color: white;\r\n    /* padding: 8px; */\r\n    /* font-size: 15px; */\r\n    /* margin-top: 8px; */\r\n    padding-left: 20px;\r\n    padding-right: 20px;\r\n}\r\n.navbar .navbar-nav > li > a.github-btn i\r\n{\r\n    transition:.3s all;\r\n    font-size: 15px;\r\n    margin-left: 2px;\r\n}\r\n.navbar .navbar-nav > li > a.github-btn:hover i\r\n{\r\n    font-size: 20px;\r\n}\r\n.navbar .navbar-nav {\r\n    display: inline-block;\r\n    float: none;\r\n}\r\n.navbar .navbar-collapse {\r\n    text-align: center;\r\n}\r\n#dragitemslist h3\r\n{\r\n    color: rgb(255, 255, 255);\r\n    text-shadow: 0px 1px 1px black;\r\n}\r\n#dragitemslist\r\n{\r\n    position: fixed;\r\n    top: 50px;\r\n    width: 100%;\r\n    left: 0px;\r\n    text-align: center;\r\n    background: rgb(18, 56, 79);\r\n    color: rgb(215, 215, 215);\r\n    /* border-bottom: 1px solid rgb(17, 33, 42); */\r\n    /* box-shadow: 0px 1px 2px rgb(22, 42, 55); */\r\n    height: 170px;\r\n}\r\n#dragitemslist + div\r\n{\r\n    margin-top: 220px;\r\n    border-top: 5px solid rgb(0, 187, 255);\r\n}\r\n#dragitemslistcontainer\r\n{\r\n    list-style: none;\r\n    padding: 0px;\r\n}\r\n#dragitemslistcontainer > li\r\n{\r\n    display:inline-block;\r\n    margin-right:2px;\r\n    padding: 10px 15px;\r\n    cursor: move;\r\n    color: white;\r\n    border: 1px solid;\r\n    width: 120px;\r\n    color: rgb(255, 255, 255);\r\n    background-color: rgb(18, 56, 79);\r\n    text-shadow: 0px 1px 1px black;\r\n}\r\n#dragitemslistcontainer > li i\r\n{\r\n    font-size:40px;\r\n    margin-bottom:10px;\r\n    /* color: rgb(0, 187, 255); */\r\n}\r\n#dragitemslistcontainer > li p\r\n{\r\n    margin:0px;\r\n}\r\n#clientframe\r\n{\r\n    height:100%;\r\n    width:100%;\r\n}\r\n#clientframe-container\r\n{\r\n    height: -webkit-calc(100% - 220px);\r\n    height: calc(100% - 220px);\r\n    height: -moz-calc(100% - 220px);\r\n    height: -ms-calc(100% - 220px);\r\n    height: -o-calc(100% - 220px);\r\n    width: 100%;\r\n}"
  },
  {
    "path": "assets/css/emptyiframe-css.css",
    "content": "html, body { height: 100%; padding: 0px; margin: 0px; overflow: hidden;}\r\n#stackhive-placement\r\n{\r\n    position: fixed;\r\n    top:0px;\r\n    width: 100%;\r\n    background-color: white;\r\n    height: 50px;\r\n}\r\n.navbar\r\n{\r\n    height: 55px;\r\n    background-color: rgba(254, 254, 254, 0.95);\r\n    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.13);\r\n    border: none;\r\n}\r\n.navbar-brand\r\n{\r\n    padding-top: 0px;\r\n    padding-bottom: 0px;\r\n    height: 35px;\r\n    margin-top: 8px;\r\n    position: relative;\r\n    left: 10px;\r\n}\r\n.navbar-brand > img\r\n{\r\n    height: 100%;\r\n}\r\n\r\na.btn,a.btn:hover.a.btn:active;\r\n{\r\n    outline:none;\r\n}\r\n.navbar .navbar-nav > li > a\r\n{\r\n    /* border-left:solid 1px #d8d8d8; */\r\n    color:#3d3d3d;\r\n    font-family: 'Roboto Condensed', sans-serif;\r\n    font-size: 18px;\r\n}\r\n\r\n.navbar .navbar-nav > li:last-child > a\r\n{\r\n    /* border-right:solid 1px #d8d8d8; */\r\n}\r\n.navbar .navbar-nav > li > a.stackhive-btn\r\n{\r\n    border:none;\r\n    background-color: rgb(214, 3, 76);\r\n    color: white;\r\n    /* padding: 8px; */\r\n    /* font-size: 15px; */\r\n    /* margin-top: 8px; */\r\n    padding-left: 20px;\r\n    padding-right: 20px;\r\n}\r\n.navbar .navbar-nav > li > a.stackhive-btn i\r\n{\r\n    transition:.3s all;\r\n    font-size: 15px;\r\n    margin-left: 2px;\r\n}\r\n.navbar .navbar-nav > li > a.stackhive-btn:hover i\r\n{\r\n    transform: translateX(5px);\r\n}\r\n.navbar .navbar-nav > li > a.github-btn\r\n{\r\n    border:none;\r\n    background-color: rgb(18, 56, 79);\r\n    color: white;\r\n    /* padding: 8px; */\r\n    /* font-size: 15px; */\r\n    /* margin-top: 8px; */\r\n    padding-left: 20px;\r\n    padding-right: 20px;\r\n}\r\n.navbar .navbar-nav > li > a.github-btn i\r\n{\r\n    transition:.3s all;\r\n    font-size: 15px;\r\n    margin-left: 2px;\r\n}\r\n.navbar .navbar-nav > li > a.github-btn:hover i\r\n{\r\n    font-size: 20px;\r\n}\r\n.navbar .navbar-nav {\r\n    display: inline-block;\r\n    float: none;\r\n}\r\n.navbar .navbar-collapse {\r\n    text-align: center;\r\n}\r\n#dragitemslist h3\r\n{\r\n    color: rgb(255, 255, 255);\r\n    text-shadow: 0px 1px 1px black;\r\n}\r\n#dragitemslist\r\n{\r\n    position: fixed;\r\n    top: 50px;\r\n    width: 100%;\r\n    left: 0px;\r\n    text-align: center;\r\n    background: rgb(18, 56, 79);\r\n    color: rgb(215, 215, 215);\r\n    /* border-bottom: 1px solid rgb(17, 33, 42); */\r\n    /* box-shadow: 0px 1px 2px rgb(22, 42, 55); */\r\n    height: 170px;\r\n}\r\n#dragitemslist + div\r\n{\r\n    margin-top: 220px;\r\n    /* border-top: 5px solid rgb(0, 187, 255); */\r\n}\r\n#dragitemslistcontainer\r\n{\r\n    list-style: none;\r\n    padding: 0px;\r\n}\r\n#dragitemslistcontainer > li\r\n{\r\n    display:inline-block;\r\n    margin-right:2px;\r\n    padding: 10px 15px;\r\n    cursor: move;\r\n    color: white;\r\n    border: 1px solid;\r\n    width: 120px;\r\n    color: rgb(255, 255, 255);\r\n    background-color: rgb(18, 56, 79);\r\n    text-shadow: 0px 1px 1px black;\r\n}\r\n#dragitemslistcontainer > li i\r\n{\r\n    font-size:40px;\r\n    margin-bottom:10px;\r\n    /* color: rgb(0, 187, 255); */\r\n}\r\n#dragitemslistcontainer > li p\r\n{\r\n    margin:0px;\r\n}\r\n#clientframe\r\n{\r\n    height:100%;\r\n    width:100%;\r\n}\r\n#clientframe-container\r\n{\r\n    height: -webkit-calc(100% - 220px);\r\n    height: calc(100% - 220px);\r\n    height: -moz-calc(100% - 170px);\r\n    height: -ms-calc(100% - 170px);\r\n    height: -o-calc(100% - 170px);\r\n    width: 100%;\r\n}"
  },
  {
    "path": "assets/js/dnd.js",
    "content": "//Changed Code -\r\n//$(clientFrameWindow.document.body).find('.reserved-drop-marker').remove();\r\n//$(event.target).append(\"<p class='reserved-drop-marker'></p>\");\r\n\r\n$(function()\r\n{\r\n    var currentElement,currentElementChangeFlag,elementRectangle,countdown,dragoverqueue_processtimer;\r\n\r\n    var clientFrameWindow = $('#clientframe').get(0).contentWindow;\r\n    $(\"#dragitemslistcontainer li\").on('dragstart',function(event) {\r\n        console.log(\"Drag Started\");\r\n        dragoverqueue_processtimer = setInterval(function() {\r\n            DragDropFunctions.ProcessDragOverQueue();\r\n        },100);\r\n        var insertingHTML = $(this).attr('data-insert-html');\r\n        event.originalEvent.dataTransfer.setData(\"Text\",insertingHTML);\r\n    });\r\n    $(\"#dragitemslistcontainer li\").on('dragend',function() {\r\n        console.log(\"Drag End\");\r\n        clearInterval(dragoverqueue_processtimer);\r\n        DragDropFunctions.removePlaceholder();\r\n        DragDropFunctions.ClearContainerContext();\r\n    });\r\n    $('#clientframe').load(function()\r\n    {\r\n        //Add CSS File to iFrame\r\n        var style = $(\"<style data-reserved-styletag></style>\").html(GetInsertionCSS());\r\n        $(clientFrameWindow.document.head).append(style);\r\n\r\n        var htmlBody = $(clientFrameWindow.document).find('body,html');\r\n        htmlBody.find('*').andSelf().on('dragenter',function(event)\r\n        {\r\n            event.stopPropagation();\r\n            currentElement = $(event.target);\r\n            currentElementChangeFlag = true;\r\n            elementRectangle = event.target.getBoundingClientRect();\r\n            countdown = 1;\r\n\r\n        }).on('dragover',function(event)\r\n        {\r\n            event.preventDefault();\r\n            event.stopPropagation();\r\n            if(countdown%15 != 0 && currentElementChangeFlag == false)\r\n            {\r\n                countdown = countdown+1;\r\n                return;\r\n            }\r\n            event = event || window.event;\r\n\r\n            var x = event.originalEvent.clientX;\r\n            var y = event.originalEvent.clientY;\r\n            countdown = countdown+1;\r\n            currentElementChangeFlag = false;\r\n            var mousePosition = {x:x,y:y};\r\n            DragDropFunctions.AddEntryToDragOverQueue(currentElement,elementRectangle,mousePosition)\r\n        })\r\n\r\n        $(clientFrameWindow.document).find('body,html').on('drop',function(event) {\r\n            event.preventDefault();\r\n            event.stopPropagation();\r\n            console.log('Drop event');\r\n            var e;\r\n            if (event.isTrigger)\r\n                e = triggerEvent.originalEvent;\r\n            else\r\n                var e = event.originalEvent;\r\n            try {\r\n                var textData = e.dataTransfer.getData('text');\r\n                var insertionPoint = $(\"#clientframe\").contents().find(\".drop-marker\");\r\n                var checkDiv = $(textData);\r\n                insertionPoint.after(checkDiv);\r\n                insertionPoint.remove();\r\n            }\r\n            catch(e)\r\n            {\r\n                console.log(e);\r\n            }\r\n        });\r\n    });\r\n\r\n    var DragDropFunctions =\r\n    {\r\n        dragoverqueue : [],\r\n        GetMouseBearingsPercentage : function($element,elementRect,mousePos)\r\n        {\r\n            if(!elementRect)\r\n                elementRect = $element.get(0).getBoundingClientRect();\r\n            var mousePosPercent_X = ((mousePos.x-elementRect.left)/(elementRect.right-elementRect.left))*100;\r\n            var mousePosPercent_Y = ((mousePos.y-elementRect.top) /(elementRect.bottom-elementRect.top))*100;\r\n\r\n            return {x:mousePosPercent_X,y:mousePosPercent_Y};\r\n        },\r\n        OrchestrateDragDrop : function($element, elementRect, mousePos)\r\n        {\r\n            //If no element is hovered or element hovered is the placeholder -> not valid -> return false;\r\n            if(!$element || $element.length == 0 || !elementRect || !mousePos)\r\n                return false;\r\n\r\n            if($element.is('html'))\r\n                $element = $element.find('body');\r\n            //Top and Bottom Area Percentage to trigger different case. [5% of top and bottom area gets reserved for this]\r\n            var breakPointNumber = {x:5,y:5};\r\n\r\n            var mousePercents = this.GetMouseBearingsPercentage($element,elementRect,mousePos);\r\n            if((mousePercents.x > breakPointNumber.x && mousePercents.x < 100-breakPointNumber.x) && (mousePercents.y > breakPointNumber.y && mousePercents.y < 100-breakPointNumber.y))\r\n            {\r\n                //Case 1 -\r\n                $tempelement = $element.clone();\r\n                $tempelement.find(\".drop-marker\").remove();\r\n                if($tempelement.html() == \"\" && !this.checkVoidElement($tempelement))\r\n                {\r\n                    if(mousePercents.y < 90)\r\n                        return this.PlaceInside($element);\r\n                }\r\n                else if($tempelement.children().length == 0)\r\n                {\r\n                    //text element detected\r\n                    //console.log(\"Text Element\");\r\n                    this.DecideBeforeAfter($element,mousePercents);\r\n                }\r\n                else if($tempelement.children().length == 1)\r\n                {\r\n                    //only 1 child element detected\r\n                    //console.log(\"1 Child Element\");\r\n                    this.DecideBeforeAfter($element.children(\":not(.drop-marker,[data-dragcontext-marker])\").first(),mousePercents);\r\n                }\r\n                else\r\n                {\r\n                    var positionAndElement = this.findNearestElement($element,mousePos.x,mousePos.y);\r\n                    this.DecideBeforeAfter(positionAndElement.el,mousePercents,mousePos);\r\n                    //more than 1 child element present\r\n                    //console.log(\"More than 1 child detected\");\r\n                }\r\n            }\r\n            else if((mousePercents.x <= breakPointNumber.x) || (mousePercents.y <= breakPointNumber.y))\r\n            {\r\n                var validElement = null\r\n                if(mousePercents.y <= mousePercents.x)\r\n                    validElement = this.FindValidParent($element,'top');\r\n                else\r\n                    validElement = this.FindValidParent($element,'left');\r\n\r\n                if(validElement.is(\"body,html\"))\r\n                    validElement = $(\"#clientframe\").contents().find(\"body\").children(\":not(.drop-marker,[data-dragcontext-marker])\").first();\r\n                this.DecideBeforeAfter(validElement,mousePercents,mousePos);\r\n            }\r\n            else if((mousePercents.x >= 100-breakPointNumber.x) || (mousePercents.y >= 100-breakPointNumber.y))\r\n            {\r\n                var validElement = null\r\n                if(mousePercents.y >= mousePercents.x)\r\n                    validElement = this.FindValidParent($element,'bottom');\r\n                else\r\n                    validElement = this.FindValidParent($element,'right');\r\n\r\n                if(validElement.is(\"body,html\"))\r\n                    validElement = $(\"#clientframe\").contents().find(\"body\").children(\":not(.drop-marker,[data-dragcontext-marker])\").last();\r\n                this.DecideBeforeAfter(validElement,mousePercents,mousePos);\r\n            }\r\n        },\r\n        DecideBeforeAfter : function($targetElement,mousePercents,mousePos)\r\n        {\r\n            if(mousePos)\r\n            {\r\n                mousePercents = this.GetMouseBearingsPercentage($targetElement,null,mousePos);\r\n            }\r\n\r\n            /*if(!mousePercents)\r\n             {\r\n             mousePercents = this.GetMouseBearingsPercentage($targetElement, $targetElement.get(0).getBoundingClientRect(), mousePos);\r\n             } */\r\n\r\n            $orientation = ($targetElement.css('display') == \"inline\" || $targetElement.css('display') == \"inline-block\");\r\n            if($targetElement.is(\"br\"))\r\n                $orientation = false;\r\n\r\n            if($orientation)\r\n            {\r\n                if(mousePercents.x < 50)\r\n                {\r\n                    return this.PlaceBefore($targetElement);\r\n                }\r\n                else\r\n                {\r\n                    return this.PlaceAfter($targetElement);\r\n                }\r\n            }\r\n            else\r\n            {\r\n                if(mousePercents.y < 50)\r\n                {\r\n                    return this.PlaceBefore($targetElement);\r\n                }\r\n                else\r\n                {\r\n                    return this.PlaceAfter($targetElement);\r\n                }\r\n            }\r\n        },\r\n        checkVoidElement : function($element)\r\n        {\r\n            var voidelements = ['i','area','base','br','col','command','embed','hr','img','input','keygen','link','meta','param','video','iframe','source','track','wbr'];\r\n            var selector = voidelements.join(\",\")\r\n            if($element.is(selector))\r\n                return true;\r\n            else\r\n                return false;\r\n        },\r\n        calculateDistance : function(elementData, mouseX, mouseY)\r\n        {\r\n            return Math.sqrt(Math.pow(elementData.x - mouseX, 2) + Math.pow(elementData.y - mouseY, 2));\r\n        },\r\n        FindValidParent : function($element,direction)\r\n        {\r\n            switch(direction)\r\n            {\r\n                case \"left\":\r\n                    while(true)\r\n                    {\r\n                        var elementRect = $element.get(0).getBoundingClientRect();\r\n                        var $tempElement = $element.parent();\r\n                        var tempelementRect = $tempElement.get(0).getBoundingClientRect();\r\n                        if($element.is(\"body\"))\r\n                            return $element;\r\n                        if(Math.abs(tempelementRect.left - elementRect.left) == 0)\r\n                            $element = $element.parent();\r\n                        else\r\n                            return $element;\r\n                    }\r\n                    break;\r\n                case \"right\":\r\n                    while(true)\r\n                    {\r\n                        var elementRect = $element.get(0).getBoundingClientRect();\r\n                        var $tempElement = $element.parent();\r\n                        var tempelementRect = $tempElement.get(0).getBoundingClientRect();\r\n                        if($element.is(\"body\"))\r\n                            return $element;\r\n                        if(Math.abs(tempelementRect.right - elementRect.right) == 0)\r\n                            $element = $element.parent();\r\n                        else\r\n                            return $element;\r\n                    }\r\n                    break;\r\n                case \"top\":\r\n                    while(true)\r\n                    {\r\n                        var elementRect = $element.get(0).getBoundingClientRect();\r\n                        var $tempElement = $element.parent();\r\n                        var tempelementRect = $tempElement.get(0).getBoundingClientRect();\r\n                        if($element.is(\"body\"))\r\n                            return $element;\r\n                        if(Math.abs(tempelementRect.top - elementRect.top) == 0)\r\n                            $element = $element.parent();\r\n                        else\r\n                            return $element;\r\n                    }\r\n                    break;\r\n                case \"bottom\":\r\n                    while(true)\r\n                    {\r\n                        var elementRect = $element.get(0).getBoundingClientRect();\r\n                        var $tempElement = $element.parent();\r\n                        var tempelementRect = $tempElement.get(0).getBoundingClientRect();\r\n                        if($element.is(\"body\"))\r\n                            return $element;\r\n                        if(Math.abs(tempelementRect.bottom - elementRect.bottom) == 0)\r\n                            $element = $element.parent();\r\n                        else\r\n                            return $element;\r\n                    }\r\n                    break;\r\n            }\r\n        },\r\n        addPlaceHolder : function($element,position,placeholder)\r\n        {\r\n            if(!placeholder)\r\n                placeholder = this.getPlaceHolder();\r\n            this.removePlaceholder();\r\n            switch(position)\r\n            {\r\n                case \"before\":\r\n                    placeholder.find(\".message\").html($element.parent().data('sh-dnd-error'));\r\n                    $element.before(placeholder);\r\n                    console.log($element);\r\n                    console.log(\"BEFORE\");\r\n                    this.AddContainerContext($element,'sibling');\r\n                    break;\r\n                case \"after\":\r\n                    placeholder.find(\".message\").html($element.parent().data('sh-dnd-error'));\r\n                    $element.after(placeholder);\r\n                    console.log($element);\r\n                    console.log(\"AFTER\");\r\n                    this.AddContainerContext($element,'sibling');\r\n                    break\r\n                case \"inside-prepend\":\r\n                    placeholder.find(\".message\").html($element.data('sh-dnd-error'));\r\n                    $element.prepend(placeholder);\r\n                    this.AddContainerContext($element,'inside');\r\n                    console.log($element);\r\n                    console.log(\"PREPEND\");\r\n                    break;\r\n                case \"inside-append\":\r\n                    placeholder.find(\".message\").html($element.data('sh-dnd-error'));\r\n                    $element.append(placeholder);\r\n                    this.AddContainerContext($element,'inside');\r\n                    console.log($element);\r\n                    console.log(\"APPEND\");\r\n                    break;\r\n            }\r\n        },\r\n        removePlaceholder : function()\r\n        {\r\n            $(\"#clientframe\").contents().find(\".drop-marker\").remove();\r\n        },\r\n        getPlaceHolder : function()\r\n        {\r\n            return $(\"<li class='drop-marker'></li>\");\r\n        },\r\n        PlaceInside : function($element)\r\n        {\r\n            var placeholder = this.getPlaceHolder();\r\n            placeholder.addClass('horizontal').css('width',$element.width()+\"px\");\r\n            this.addPlaceHolder($element,\"inside-append\",placeholder);\r\n        },\r\n        PlaceBefore : function($element)\r\n        {\r\n            var placeholder = this.getPlaceHolder();\r\n            var inlinePlaceholder = ($element.css('display') == \"inline\" || $element.css('display') == \"inline-block\");\r\n            if($element.is(\"br\"))\r\n            {\r\n                inlinePlaceholder = false;\r\n            }\r\n            else if($element.is(\"td,th\"))\r\n            {\r\n                placeholder.addClass('horizontal').css('width',$element.width()+\"px\");\r\n                return this.addPlaceHolder($element,\"inside-prepend\",placeholder);\r\n            }\r\n            if(inlinePlaceholder)\r\n                placeholder.addClass(\"vertical\").css('height',$element.innerHeight()+\"px\");\r\n            else\r\n                placeholder.addClass(\"horizontal\").css('width',$element.parent().width()+\"px\");\r\n            this.addPlaceHolder($element,\"before\",placeholder);\r\n        },\r\n\r\n        PlaceAfter : function($element)\r\n        {\r\n            var placeholder = this.getPlaceHolder();\r\n            var inlinePlaceholder = ($element.css('display') == \"inline\" || $element.css('display') == \"inline-block\");\r\n            if($element.is(\"br\"))\r\n            {\r\n                inlinePlaceholder = false;\r\n            }\r\n            else if($element.is(\"td,th\"))\r\n            {\r\n                placeholder.addClass('horizontal').css('width',$element.width()+\"px\");\r\n                return this.addPlaceHolder($element,\"inside-append\",placeholder);\r\n            }\r\n            if(inlinePlaceholder)\r\n                placeholder.addClass(\"vertical\").css('height',$element.innerHeight()+\"px\");\r\n            else\r\n                placeholder.addClass(\"horizontal\").css('width',$element.parent().width()+\"px\");\r\n            this.addPlaceHolder($element,\"after\",placeholder);\r\n        },\r\n        findNearestElement : function($container,clientX,clientY)\r\n        {\r\n            var _this = this;\r\n            var previousElData = null;\r\n            var childElement = $container.children(\":not(.drop-marker,[data-dragcontext-marker])\");\r\n            if(childElement.length > 0)\r\n            {\r\n                childElement.each(function()\r\n                {\r\n                    if($(this).is(\".drop-marker\"))\r\n                        return;\r\n\r\n                    var offset = $(this).get(0).getBoundingClientRect();\r\n                    var distance = 0;\r\n                    var distance1,distance2 = null;\r\n                    var position = '';\r\n                    var xPosition1 = offset.left;\r\n                    var xPosition2 = offset.right;\r\n                    var yPosition1 = offset.top;\r\n                    var yPosition2 = offset.bottom;\r\n                    var corner1 = null;\r\n                    var corner2 = null;\r\n\r\n                    //Parellel to Yaxis and intersecting with x axis\r\n                    if(clientY > yPosition1 && clientY <  yPosition2 )\r\n                    {\r\n                        if(clientX < xPosition1 && clientY < xPosition2)\r\n                        {\r\n                            corner1 = {x:xPosition1, y:clientY,'position':'before'};\r\n                        }\r\n                        else\r\n                        {\r\n                            corner1 = {x:xPosition2, y:clientY,'position':'after'};\r\n                        }\r\n\r\n                    }\r\n                    //Parellel to xAxis and intersecting with Y axis\r\n                    else if(clientX > xPosition1 && clientX < xPosition2)\r\n                    {\r\n                        if(clientY < yPosition1 && clientY < yPosition2)\r\n                        {\r\n                            corner1 = {x:clientX, y:yPosition1,'position':'before'};\r\n                        }\r\n                        else\r\n                        {\r\n                            corner1 = {x:clientX, y:yPosition2,'position':'after'};\r\n                        }\r\n\r\n                    }\r\n                    else\r\n                    {\r\n                        //runs if no element found!\r\n                        if(clientX < xPosition1 && clientX < xPosition2)\r\n                        {\r\n                            corner1 = {x:xPosition1, y:yPosition1,'position':'before'};          //left top\r\n                            corner2 = {x:xPosition1, y :yPosition2,'position':'after'};       //left bottom\r\n                        }\r\n                        else if(clientX > xPosition1 && clientX > xPosition2)\r\n                        {\r\n                            //console.log('I m on the right of the element');\r\n                            corner1 = {x:xPosition2, y:yPosition1,'position':'before'};   //Right top\r\n                            corner2 = {x:xPosition2, y :yPosition2,'position':'after'}; //Right Bottom\r\n                        }\r\n                        else if(clientY < yPosition1 && clientY < yPosition2)\r\n                        {\r\n                            // console.log('I m on the top of the element');\r\n                            corner1 = {x :xPosition1, y:yPosition1,'position':'before'}; //Top Left\r\n                            corner2 = {x :xPosition2, y:yPosition1,'position':'after'}; //Top Right\r\n                        }\r\n                        else if(clientY > yPosition1 && clientY > yPosition2)\r\n                        {\r\n                            // console.log('I m on the bottom of the element');\r\n                            corner1 = {x :xPosition1, y:yPosition2,'position':'before'}; //Left bottom\r\n                            corner2 = {x :xPosition2, y:yPosition2,'position':'after'} //Right Bottom\r\n                        }\r\n                    }\r\n\r\n                    distance1 = _this.calculateDistance(corner1, clientX, clientY);\r\n\r\n                    if(corner2 !== null)\r\n                        distance2 = _this.calculateDistance(corner2, clientX, clientY);\r\n\r\n                    if(distance1 < distance2 || distance2 === null)\r\n                    {\r\n                        distance = distance1;\r\n                        position = corner1.position;\r\n                    }\r\n                    else\r\n                    {\r\n                        distance = distance2;\r\n                        position = corner2.position;\r\n                    }\r\n\r\n                    if(previousElData !== null)\r\n                    {\r\n                        if(previousElData.distance < distance)\r\n                        {\r\n                            return true; //continue statement\r\n                        }\r\n                    }\r\n                    previousElData =    {'el':this,'distance':distance,'xPosition1':xPosition1,'xPosition2':xPosition2,'yPosition1':yPosition1,'yPosition2':yPosition2, 'position':position}\r\n                });\r\n                if(previousElData !== null)\r\n                {\r\n                    var position = previousElData.position;\r\n                    return {'el':$(previousElData.el),'position':position};\r\n                }\r\n                else\r\n                {\r\n                    return false;\r\n                }\r\n            }\r\n        },\r\n        AddEntryToDragOverQueue : function($element,elementRect,mousePos)\r\n        {\r\n            var newEvent = [$element,elementRect,mousePos];\r\n            this.dragoverqueue.push(newEvent);\r\n        },\r\n        ProcessDragOverQueue : function($element,elementRect,mousePos)\r\n        {\r\n            var processing = this.dragoverqueue.pop();\r\n            this.dragoverqueue = [];\r\n            if(processing && processing.length == 3)\r\n            {\r\n                var $el = processing[0];\r\n                var $elRect = processing[1];\r\n                var mousePos = processing[2];\r\n                this.OrchestrateDragDrop($el, $elRect, mousePos);\r\n            }\r\n\r\n        },\r\n        GetContextMarker : function()\r\n        {\r\n            $contextMarker = $(\"<div data-dragcontext-marker><span data-dragcontext-marker-text></span></div>\");\r\n            return $contextMarker;\r\n        },\r\n        AddContainerContext : function($element,position)\r\n        {\r\n\r\n            $contextMarker = this.GetContextMarker();\r\n            this.ClearContainerContext();\r\n            if($element.is('html,body'))\r\n            {\r\n                position = 'inside';\r\n                $element =  $(\"#clientframe\").contents().find(\"body\");\r\n            }\r\n            switch(position)\r\n            {\r\n                case \"inside\":\r\n                    this.PositionContextMarker($contextMarker,$element);\r\n                    if($element.hasClass('stackhive-nodrop-zone'))\r\n                        $contextMarker.addClass('invalid');\r\n                    var name = this.getElementName($element);\r\n                    $contextMarker.find('[data-dragcontext-marker-text]').html(name);\r\n                    if($(\"#clientframe\").contents().find(\"body [data-sh-parent-marker]\").length != 0)\r\n                        $(\"#clientframe\").contents().find(\"body [data-sh-parent-marker]\").first().before($contextMarker);\r\n                    else\r\n                        $(\"#clientframe\").contents().find(\"body\").append($contextMarker);\r\n                    break;\r\n                case \"sibling\":\r\n                    this.PositionContextMarker($contextMarker,$element.parent());\r\n                    if($element.parent().hasClass('stackhive-nodrop-zone'))\r\n                        $contextMarker.addClass('invalid');\r\n                    var name = this.getElementName($element.parent());\r\n                    $contextMarker.find('[data-dragcontext-marker-text]').html(name);\r\n                    $contextMarker.attr(\"data-dragcontext-marker\",name.toLowerCase());\r\n                    if($(\"#clientframe\").contents().find(\"body [data-sh-parent-marker]\").length != 0)\r\n                        $(\"#clientframe\").contents().find(\"body [data-sh-parent-marker]\").first().before($contextMarker);\r\n                    else\r\n                        $(\"#clientframe\").contents().find(\"body\").append($contextMarker);\r\n                    break;\r\n            }\r\n        },\r\n        PositionContextMarker : function($contextMarker,$element)\r\n        {\r\n            var rect = $element.get(0).getBoundingClientRect();\r\n            $contextMarker.css({\r\n                height: (rect.height + 4) +\"px\",\r\n                width: (rect.width + 4) +\"px\",\r\n                top: (rect.top+$($(\"#clientframe\").get(0).contentWindow).scrollTop() - 2) +\"px\",\r\n                left: (rect.left+$($(\"#clientframe\").get(0).contentWindow).scrollLeft() - 2)+\"px\"\r\n            });\r\n            if(rect.top+$(\"#clientframe\").contents().find(\"body\").scrollTop() < 24)\r\n                $contextMarker.find(\"[data-dragcontext-marker-text]\").css('top','0px');\r\n        },\r\n        ClearContainerContext : function()\r\n        {\r\n            $(\"#clientframe\").contents().find('[data-dragcontext-marker]').remove();\r\n        },\r\n        getElementName : function($element)\r\n        {\r\n            return $element.prop('tagName');\r\n        }\r\n    };\r\n\r\n    GetInsertionCSS = function()\r\n    {\r\n        var styles = \"\"+\r\n            \".reserved-drop-marker{width:100%;height:2px;background:#00a8ff;position:absolute}.reserved-drop-marker::after,.reserved-drop-marker::before{content:'';background:#00a8ff;height:7px;width:7px;position:absolute;border-radius:50%;top:-2px}.reserved-drop-marker::before{left:0}.reserved-drop-marker::after{right:0}\";\r\n        styles += \"[data-dragcontext-marker],[data-sh-parent-marker]{outline:#19cd9d solid 2px;text-align:center;position:absolute;z-index:123456781;pointer-events:none;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}[data-dragcontext-marker] [data-dragcontext-marker-text],[data-sh-parent-marker] [data-sh-parent-marker-text]{background:#19cd9d;color:#fff;padding:2px 10px;display:inline-block;font-size:14px;position:relative;top:-24px;min-width:121px;font-weight:700;pointer-events:none;z-index:123456782}[data-dragcontext-marker].invalid{outline:#dc044f solid 2px}[data-dragcontext-marker].invalid [data-dragcontext-marker-text]{background:#dc044f}[data-dragcontext-marker=body]{outline-offset:-2px}[data-dragcontext-marker=body] [data-dragcontext-marker-text]{top:0;position:fixed}\";\r\n        styles += '.drop-marker{pointer-events:none;}.drop-marker.horizontal{background:#00adff;position:absolute;height:2px;list-style:none;visibility:visible!important;box-shadow:0 1px 2px rgba(255,255,255,.4),0 -1px 2px rgba(255,255,255,.4);z-index:123456789;text-align:center}.drop-marker.horizontal.topside{margin-top:0}.drop-marker.horizontal.bottomside{margin-top:2px}.drop-marker.horizontal:before{content:\"\";width:8px;height:8px;background:#00adff;border-radius:8px;margin-top:-3px;float:left;box-shadow:0 1px 2px rgba(255,255,255,.4),0 -1px 2px rgba(255,255,255,.4)}.drop-marker.horizontal:after{content:\"\";width:8px;height:8px;background:#00adff;border-radius:8px;margin-top:-3px;float:right;box-shadow:0 1px 2px rgba(255,255,255,.4),0 -1px 2px rgba(255,255,255,.4)}.drop-marker.vertical{height:50px;list-style:none;border:1px solid #00ADFF;position:absolute;margin-left:3px;display:inline;box-shadow:1px 0 2px rgba(255,255,255,.4),-1px 0 2px rgba(255,255,255,.4)}.drop-marker.vertical.leftside{margin-left:0}.drop-marker.vertical.rightside{margin-left:3px}.drop-marker.vertical:before{content:\"\";width:8px;height:8px;background:#00adff;border-radius:8px;margin-top:-4px;top:0;position:absolute;margin-left:-4px;box-shadow:1px 0 2px rgba(255,255,255,.4),-1px 0 2px rgba(255,255,255,.4)}.drop-marker.vertical:after{content:\"\";width:8px;height:8px;background:#00adff;border-radius:8px;margin-left:-4px;bottom:-4px;position:absolute;box-shadow:1px 0 2px rgba(255,255,255,.4),-1px 0 2px rgba(255,255,255,.4)}';\r\n        return styles;\r\n    }\r\n});"
  },
  {
    "path": "client.html",
    "content": "<!--\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <title></title>\r\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css\">\r\n</head>\r\n<body>\r\n    <section>\r\n        <div>\r\n            <h1>A Blank HTML Page Without Any Scripts</h1>\r\n        </div>\r\n    </section>\r\n</body>\r\n</html>-->\r\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css\" rel=\"stylesheet\">\r\n    <style>\r\n        img\r\n        {\r\n            max-width:100%;\r\n        }\r\n    </style>\r\n</head>\r\n\r\n<body>\r\n<div class=\"jumbotron\">\r\n    <div class=\"container\">\r\n        <h1>Hello, world!</h1>\r\n        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>\r\n        <p>\r\n            <a class=\"btn btn-primary btn-lg\" role=\"button\">Learn more &raquo;</a>\r\n        </p>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"container\">\r\n    <!-- Example row of columns -->\r\n    <div class=\"row\">\r\n        <div class=\"col-md-4\">\r\n            <h2>Heading</h2>\r\n            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>\r\n            <p>\r\n                <a class=\"btn btn-default\" href=\"#\" role=\"button\">View details &raquo;</a>\r\n            </p>\r\n        </div>\r\n        <div class=\"col-md-4\">\r\n            <h2>Heading</h2>\r\n            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>\r\n            <p>\r\n                <a class=\"btn btn-default\" href=\"#\" role=\"button\">View details &raquo;</a>\r\n            </p>\r\n        </div>\r\n        <div class=\"col-md-4\">\r\n            <h2>Heading</h2>\r\n            <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet\r\n                risus.\r\n            </p>\r\n            <p>\r\n                <a class=\"btn btn-default\" href=\"#\" role=\"button\">View details &raquo;</a>\r\n            </p>\r\n        </div>\r\n    </div>\r\n\r\n    <hr>\r\n\r\n    <footer>\r\n        <p>&copy; Company 2014</p>\r\n    </footer>\r\n</div>\r\n</body>\r\n</html>\r\n\r\n"
  },
  {
    "path": "demointerface.html",
    "content": "<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <title>Building an awesome Drag Drop Interface - by StackHive</title>\r\n    <meta name=\"description\" content=\"Building a cross frame drag-drop interface using HTML5 for precise insertions\">\r\n    <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css\">\r\n    <link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css\">\r\n    <link href=\"./assets/css/demointerface.css\" rel=\"stylesheet\">\r\n</head>\r\n<body>\r\n<div id=\"stackhive-placement\">\r\n    <nav id=\"stackhive_navbar\" class=\"navbar navbar-default navbar-fixed-top\" role=\"navigation\">\r\n        <div class=\"container-fluid\">\r\n            <!-- Brand and toggle get grouped for better mobile display -->\r\n            <div class=\"navbar-header\">\r\n                <button type=\"button\" class=\"navbar-toggle collapsed\" data-toggle=\"collapse\" data-target=\"#sh-navbar\">\r\n                    <span class=\"sr-only\">Toggle navigation</span>\r\n                    <span class=\"icon-bar\"></span>\r\n                    <span class=\"icon-bar\"></span>\r\n                    <span class=\"icon-bar\"></span>\r\n                </button>\r\n                <a class=\"navbar-brand\" title=\"StackHive | Quick Responsive Front-End Development In The Browser.\" href=\"./\"><img src=\"http://cdn.stackhive.com/direct/site/assets/img/logo/shortlogo.png\"></a>\r\n            </div>\r\n\r\n            <!-- Collect the nav links, forms, and other content for toggling -->\r\n            <div class=\"collapse navbar-collapse\" id=\"sh-navbar\">\r\n                <ul class=\"nav navbar-nav navbar-right\">\r\n                   <li><a class=\"stackhive-btn\" href=\"http://stackhive.com?r=dnd\" target=\"_blank\">Checkout StackHive <i class=\"fa fa-chevron-right\"></i></a></li>\r\n                   <li><a class=\"github-btn\" href=\"https://github.com/StackHive\" target=\"_blank\">Fork it <i class=\"fa fa-github\"></i></a></li>\r\n                </ul>\r\n            </div><!-- /.navbar-collapse -->\r\n        </div><!-- /.container-fluid -->\r\n    </nav>\r\n</div>\r\n<div id=\"dragitemslist\">\r\n    <h3>Element List</h3>\r\n    <div>\r\n        <ul id=\"dragitemslistcontainer\">\r\n            <li draggable=\"true\" data-insert-html=\"<h1>HEADER GOES HERE</h1>\"><i class=\"fa fa-header\"></i><p>Header</p></li>\r\n            <li draggable=\"true\" data-insert-html=\"<img src='http://blogs-images.forbes.com/anthonykosner/files/2014/06/us-browser-share-adobe-index-2014.jpg'>\"><i class=\"fa fa-bar-chart\"></i><p>Chart Image</p></li>\r\n            <li draggable=\"true\" data-insert-html='<div class=\"well login-box\"> <form action=\"\"> <legend>Login</legend> <div class=\"form-group\"> <label for=\"username-email\">E-mail or Username</label> <input value=\"\" id=\"username-email\" placeholder=\"E-mail or Username\" type=\"text\" class=\"form-control\"/> </div><div class=\"form-group\"> <label for=\"password\">Password</label> <input id=\"password\" value=\"\" placeholder=\"Password\" type=\"text\" class=\"form-control\"/> </div><div class=\"form-group text-center\"> <button class=\"btn btn-danger btn-cancel-action\">Cancel</button> <input type=\"submit\" class=\"btn btn-success btn-login-submit\" value=\"Login\"/> </div></form> </div>'><i class=\"fa fa-sign-in\"></i><p>Login Form</p></li>\r\n        </ul>\r\n    </div>\r\n</div>\r\n<div id=\"clientframe-container\">\r\n    <iframe id=\"clientframe\" src=\"./client.html\" frameborder=\"0\"></iframe>\r\n</div>\r\n<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js\"></script>\r\n<script src=\"./assets/js/dnd.js\"></script>\r\n</body>\r\n</html>"
  },
  {
    "path": "first-demo/assets/css/demointerface.css",
    "content": "html, body { height: 100%; padding: 0px; margin: 0px; overflow: hidden;}\r\n#dragitemslist\r\n{\r\n    position: fixed;\r\n    top: 0px;\r\n    width: 100%;\r\n    left: 0px;\r\n    text-align: center;\r\n    background: rgb(39, 73, 94);\r\n    color: rgb(215, 215, 215);\r\n    /* border-bottom: 1px solid rgb(17, 33, 42); */\r\n    /* box-shadow: 0px 1px 2px rgb(22, 42, 55); */\r\n    height: 170px;\r\n}\r\n#dragitemslist + div\r\n{\r\n    margin-top: 170px;\r\n    border-top: 5px solid rgb(0, 187, 255);\r\n}\r\n#dragitemslistcontainer\r\n{\r\n    list-style: none;\r\n    padding: 0px;\r\n}\r\n#dragitemslistcontainer > li\r\n{\r\n    display:inline-block;\r\n    margin-right:2px;\r\n    padding: 10px 15px;\r\n    cursor: move;\r\n    color: white;\r\n    border: 1px solid;\r\n    min-width: 85px;\r\n    color: rgb(160, 244, 255);\r\n    background-color: rgb(39, 73, 94);\r\n}\r\n#dragitemslistcontainer > li i\r\n{\r\n    font-size:40px;\r\n    margin-bottom:10px;\r\n    /* color: rgb(0, 187, 255); */\r\n}\r\n#dragitemslistcontainer > li p\r\n{\r\n    margin:0px;\r\n}\r\n#clientframe\r\n{\r\n    height:100%;\r\n    width:100%;\r\n}\r\n#clientframe-container\r\n{\r\n    height: -webkit-calc(100% - 170px);\r\n    height: calc(100% - 170px);\r\n    height: -moz-calc(100% - 170px);\r\n    height: -ms-calc(100% - 170px);\r\n    height: -o-calc(100% - 170px);\r\n    width: 100%;\r\n}"
  },
  {
    "path": "first-demo/assets/js/dnd.js",
    "content": "$(function() {\r\n    var clientFrameWindow = $('#clientframe').get(0).contentWindow;\r\n    $(\"#dragitemslistcontainer li\").on('dragstart',function() {\r\n        console.log(\"Drag Started\");\r\n    });\r\n    $(\"#dragitemslistcontainer li\").on('dragend',function() {\r\n        console.log(\"Drag End\");\r\n    });\r\n    $('#clientframe').load(function()\r\n    {\r\n        var total = 0;\r\n        $(clientFrameWindow.document.body).find('*').on('dragenter',function(event)\r\n        {\r\n            event.preventDefault();\r\n            event.stopPropagation();\r\n            console.log('Drag Enter');\r\n            total +=1;\r\n        }).on('dragover',function(event)\r\n        {\r\n            event.preventDefault();\r\n            event.stopPropagation();\r\n            console.log('Drag Over');\r\n            total +=1;\r\n        });\r\n\r\n        $(clientFrameWindow.document).find('body,html').on('drop',function(event) {\r\n            event.preventDefault();\r\n            event.stopPropagation();\r\n            console.log('Drop event');\r\n            total +=1;\r\n            console.log(\"Total Events Fired = \"+total);\r\n            total = 0;\r\n        });\r\n    });\r\n});"
  },
  {
    "path": "first-demo/client.html",
    "content": "<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css\" rel=\"stylesheet\">\r\n</head>\r\n\r\n<body>\r\n<div class=\"jumbotron\">\r\n    <div class=\"container\">\r\n        <h1>Hello, world!</h1>\r\n        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>\r\n        <p>\r\n            <a class=\"btn btn-primary btn-lg\" role=\"button\">Learn more &raquo;</a>\r\n        </p>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"container\">\r\n    <!-- Example row of columns -->\r\n    <div class=\"row\">\r\n        <div class=\"col-md-4\">\r\n            <h2>Heading</h2>\r\n            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>\r\n            <p>\r\n                <a class=\"btn btn-default\" href=\"#\" role=\"button\">View details &raquo;</a>\r\n            </p>\r\n        </div>\r\n        <div class=\"col-md-4\">\r\n            <h2>Heading</h2>\r\n            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>\r\n            <p>\r\n                <a class=\"btn btn-default\" href=\"#\" role=\"button\">View details &raquo;</a>\r\n            </p>\r\n        </div>\r\n        <div class=\"col-md-4\">\r\n            <h2>Heading</h2>\r\n            <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet\r\n                risus.\r\n            </p>\r\n            <p>\r\n                <a class=\"btn btn-default\" href=\"#\" role=\"button\">View details &raquo;</a>\r\n            </p>\r\n        </div>\r\n    </div>\r\n\r\n    <hr>\r\n\r\n    <footer>\r\n        <p>&copy; Company 2014</p>\r\n    </footer>\r\n</div>\r\n</body>\r\n</html>\r\n\r\n"
  },
  {
    "path": "first-demo/demointerface.html",
    "content": "<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <title>StackHive Blog | Precision Drag Drop</title>\r\n    <meta name=\"description\" content=\"Building a cross frame drag-drop interface using HTML5 for precise insertions\">\r\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css\">\r\n    <link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css\">\r\n    <link href=\"./assets/css/demointerface.css\" rel=\"stylesheet\">\r\n</head>\r\n<body>\r\n<div id=\"dragitemslist\">\r\n    <h3>Draggable Item List</h3>\r\n    <div>\r\n        <ul id=\"dragitemslistcontainer\">\r\n            <li draggable=\"true\"><i class=\"fa fa-header\"></i><p>Header</p></li>\r\n            <li draggable=\"true\"><i class=\"fa fa-bar-chart\"></i><p>Chart</p></li>\r\n            <li draggable=\"true\"><i class=\"fa fa-envelope\"></i><p>Contact</p></li>\r\n        </ul>\r\n    </div>\r\n</div>\r\n<div id=\"clientframe-container\">\r\n    <iframe id=\"clientframe\" src=\"./client.html\" frameborder=\"0\"></iframe>\r\n</div>\r\n<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js\"></script>\r\n<script src=\"./assets/js/dnd.js\"></script>\r\n</body>\r\n</html>"
  },
  {
    "path": "marker-added/assets/css/demointerface.css",
    "content": "html, body { height: 100%; padding: 0px; margin: 0px; overflow: hidden;}\r\n#dragitemslist\r\n{\r\n    position: fixed;\r\n    top: 0px;\r\n    width: 100%;\r\n    left: 0px;\r\n    text-align: center;\r\n    background: rgb(39, 73, 94);\r\n    color: rgb(215, 215, 215);\r\n    /* border-bottom: 1px solid rgb(17, 33, 42); */\r\n    /* box-shadow: 0px 1px 2px rgb(22, 42, 55); */\r\n    height: 170px;\r\n}\r\n#dragitemslist + div\r\n{\r\n    margin-top: 170px;\r\n    border-top: 5px solid rgb(0, 187, 255);\r\n}\r\n#dragitemslistcontainer\r\n{\r\n    list-style: none;\r\n    padding: 0px;\r\n}\r\n#dragitemslistcontainer > li\r\n{\r\n    display:inline-block;\r\n    margin-right:2px;\r\n    padding: 10px 15px;\r\n    cursor: move;\r\n    color: white;\r\n    border: 1px solid;\r\n    min-width: 85px;\r\n    color: rgb(160, 244, 255);\r\n    background-color: rgb(39, 73, 94);\r\n}\r\n#dragitemslistcontainer > li i\r\n{\r\n    font-size:40px;\r\n    margin-bottom:10px;\r\n    /* color: rgb(0, 187, 255); */\r\n}\r\n#dragitemslistcontainer > li p\r\n{\r\n    margin:0px;\r\n}\r\n#clientframe\r\n{\r\n    height:100%;\r\n    width:100%;\r\n}\r\n#clientframe-container\r\n{\r\n    height: -webkit-calc(100% - 170px);\r\n    height: calc(100% - 170px);\r\n    height: -moz-calc(100% - 170px);\r\n    height: -ms-calc(100% - 170px);\r\n    height: -o-calc(100% - 170px);\r\n    width: 100%;\r\n}"
  },
  {
    "path": "marker-added/assets/js/dnd.js",
    "content": "\r\nvar DragAndDropFunctions = {\r\n    GetMouseCoordinates_Percentage : function($element,elementRect,mousePos)\r\n    {\r\n        if(!elementRect)\r\n            elementRect = $element.get(0).getBoundingClientRect();\r\n        var mousePosPercent_X = ((mousePos.x-elementRect.left)/(elementRect.right-elementRect.left))*100;\r\n        var mousePosPercent_Y = ((mousePos.y-elementRect.top) /(elementRect.bottom-elementRect.top))*100;\r\n\r\n        return {x:mousePosPercent_X,y:mousePosPercent_Y};\r\n    },\r\n    OrchestrateDragDrop : function($element, elementRect, mousePos)\r\n    {\r\n        //If no element is hovered or element hovered is the placeholder -> not valid -> return false;\r\n        if(!$element || $element.length == 0 || !elementRect || !mousePos || $element.closest('.reserved-drop-marker').length != 0)\r\n            return false;\r\n\r\n        //Top and Bottom Area Percentage to trigger different case. [5% of top and bottom area gets reserved for this]\r\n        var breakPointNumber = {x:5,y:5};\r\n\r\n        var mousePercents = this.GetMouseCoordinates_Percentage($element,elementRect,mousePos);\r\n        if((mousePercents.x > breakPointNumber.x && mousePercents.x < 100-breakPointNumber.x) && (mousePercents.y > breakPointNumber.y && mousePercents.y < 100-breakPointNumber.y))\r\n        {\r\n            //Case 1 -\r\n            $tempelement = $element.clone();\r\n            $tempelement.find(\".reserved-drop-marker\").remove();\r\n            if($tempelement.html() == \"\" && !this.checkVoidElement($tempelement))\r\n            {\r\n                //Empty Element Detected\r\n                if(mousePercents.y < 90)\r\n                    return this.PlaceInside($element);\r\n            }\r\n            else if($tempelement.children().length == 0)\r\n            {\r\n                //Text element detected\r\n                this.DecideBeforeAfter($element,mousePercents);\r\n            }\r\n            else if($tempelement.children().length == 1)\r\n            {\r\n                //Only 1 child element detected\r\n                this.DecideBeforeAfter($element.children(\":not(.reserved-drop-marker)\").first(),mousePercents);\r\n            }\r\n            else\r\n            {\r\n                //Multiple child elements detected\r\n                var positionAndElement = StackHiveEditor.cssSettings.CommonFunctions.findNearestElement($element,mousePos.x,mousePos.y);\r\n                this.DecideBeforeAfter(positionAndElement.el,mousePercents,mousePos);\r\n            }\r\n        }\r\n        else if((mousePercents.x <= breakPointNumber.x) || (mousePercents.y <= breakPointNumber.y))\r\n        {\r\n            var validElement = null\r\n            if(mousePercents.y <= mousePercents.x)\r\n                validElement = this.FindValidParent($element,'top');\r\n            else\r\n                validElement = this.FindValidParent($element,'left');\r\n\r\n            if(validElement.is(\"body,html\"))\r\n                validElement = $(\"#stackhive_iframe\").contents().find(\"body\").children(\":not(.reserved-drop-marker)\").first();\r\n            this.DecideBeforeAfter(validElement,mousePercents,mousePos);\r\n        }\r\n        else if((mousePercents.x >= 100-breakPointNumber.x) || (mousePercents.y >= 100-breakPointNumber.y))\r\n        {\r\n            var validElement = null\r\n            if(mousePercents.y >= mousePercents.x)\r\n                validElement = this.FindValidParent($element,'bottom');\r\n            else\r\n                validElement = this.FindValidParent($element,'right');\r\n\r\n            if(validElement.is(\"body,html\"))\r\n                validElement = $(\"#stackhive_iframe\").contents().find(\"body\").children(\":not(.reserved-drop-marker)\").last();\r\n            this.DecideBeforeAfter(validElement,mousePercents,mousePos);\r\n        }\r\n    }\r\n};\r\n$(function() {\r\n    var clientFrameWindow = $('#clientframe').get(0).contentWindow;\r\n    $(\"#dragitemslistcontainer li\").on('dragstart',function() {\r\n        console.log(\"Drag Started\");\r\n    });\r\n    $(\"#dragitemslistcontainer li\").on('dragend',function() {\r\n        console.log(\"Drag End\");\r\n    });\r\n    $('#clientframe').load(function()\r\n    {\r\n        //Add CSS File to iFrame\r\n        var style = $(\"<style data-reserved-styletag></style>\").html(GetInsertionCSS());\r\n        $(clientFrameWindow.document.body).append(style);\r\n        var total = 0;\r\n        $(clientFrameWindow.document.body).find('*').on('dragenter',function(event)\r\n        {\r\n            event.preventDefault();\r\n            event.stopPropagation();\r\n            console.log('Drag Enter');\r\n            total +=1;\r\n        })\r\n        $(clientFrameWindow.document.body).find('*').on('dragover',function(event)\r\n        {\r\n            event.preventDefault();\r\n            event.stopPropagation();\r\n            $(clientFrameWindow.document.body).find('.reserved-drop-marker').remove();\r\n            $(event.target).append(\"<p class='reserved-drop-marker'></p>\");\r\n            console.log('Drag Over');\r\n            total +=1;\r\n        })\r\n\r\n        $(clientFrameWindow.document).find('body,html').on('drop',function(event) {\r\n            event.preventDefault();\r\n            event.stopPropagation();\r\n            console.log('Drop event');\r\n            total +=1;\r\n            console.log(\"Total Events Fired = \"+total);\r\n            total = 0;\r\n        });\r\n    });\r\n\r\n\r\n\r\n    GetInsertionCSS = function()\r\n    {\r\n        var styles = \"\"+\r\n            \".reserved-drop-marker{width:100%;height:2px;background:#00a8ff;position:relative}.reserved-drop-marker::after,.reserved-drop-marker::before{content:'';background:#00a8ff;height:7px;width:7px;position:absolute;border-radius:50%;top:-2px}.reserved-drop-marker::before{left:0}.reserved-drop-marker::after{right:0}\";\r\n\r\n        return styles;\r\n    }\r\n});"
  },
  {
    "path": "marker-added/client.html",
    "content": "<!--\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <title></title>\r\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css\">\r\n</head>\r\n<body>\r\n    <section>\r\n        <div>\r\n            <h1>A Blank HTML Page Without Any Scripts</h1>\r\n        </div>\r\n    </section>\r\n</body>\r\n</html>-->\r\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css\" rel=\"stylesheet\">\r\n</head>\r\n\r\n<body>\r\n<div class=\"jumbotron\">\r\n    <div class=\"container\">\r\n        <h1>Hello, world!</h1>\r\n        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>\r\n        <p>\r\n            <a class=\"btn btn-primary btn-lg\" role=\"button\">Learn more &raquo;</a>\r\n        </p>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"container\">\r\n    <!-- Example row of columns -->\r\n    <div class=\"row\">\r\n        <div class=\"col-md-4\">\r\n            <h2>Heading</h2>\r\n            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>\r\n            <p>\r\n                <a class=\"btn btn-default\" href=\"#\" role=\"button\">View details &raquo;</a>\r\n            </p>\r\n        </div>\r\n        <div class=\"col-md-4\">\r\n            <h2>Heading</h2>\r\n            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>\r\n            <p>\r\n                <a class=\"btn btn-default\" href=\"#\" role=\"button\">View details &raquo;</a>\r\n            </p>\r\n        </div>\r\n        <div class=\"col-md-4\">\r\n            <h2>Heading</h2>\r\n            <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet\r\n                risus.\r\n            </p>\r\n            <p>\r\n                <a class=\"btn btn-default\" href=\"#\" role=\"button\">View details &raquo;</a>\r\n            </p>\r\n        </div>\r\n    </div>\r\n\r\n    <hr>\r\n\r\n    <footer>\r\n        <p>&copy; Company 2014</p>\r\n    </footer>\r\n</div>\r\n</body>\r\n</html>\r\n\r\n"
  },
  {
    "path": "marker-added/demointerface.html",
    "content": "<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <title>StackHive Blog | Precision Drag Drop</title>\r\n    <meta name=\"description\" content=\"Building a cross frame drag-drop interface using HTML5 for precise insertions\">\r\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css\">\r\n    <link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css\">\r\n    <link href=\"./assets/css/demointerface.css\" rel=\"stylesheet\">\r\n</head>\r\n<body>\r\n<div id=\"dragitemslist\">\r\n    <h3>Draggable Item List</h3>\r\n    <div>\r\n        <ul id=\"dragitemslistcontainer\">\r\n            <li draggable=\"true\"><i class=\"fa fa-header\"></i><p>Header</p></li>\r\n            <li draggable=\"true\"><i class=\"fa fa-bar-chart\"></i><p>Chart</p></li>\r\n            <li draggable=\"true\"><i class=\"fa fa-envelope\"></i><p>Contact</p></li>\r\n        </ul>\r\n    </div>\r\n</div>\r\n<div id=\"clientframe-container\">\r\n    <iframe id=\"clientframe\" src=\"./client.html\" frameborder=\"0\"></iframe>\r\n</div>\r\n<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js\"></script>\r\n<script src=\"./assets/js/dnd.js\"></script>\r\n</body>\r\n</html>"
  }
]