Drag Item from Visualforce page onto parent in console layout

Question

I was wondering if anyone had come across anything like this?

I have been asked to find out if it is possible to setup jQuery Draggable and jQuery Droppable to drag an item from the console and drop that item into another place within the console. The idea is as follows:

As you can see here I have a list of people on the left side of the screen, this is a custom VF page that just displays all contacts, I want to be able to drag a contact and drop the contact into a case, now I can set up draggable and droppable easily, I have done it before... however, I have never done a drag and drop from an iFrame to the parent.. only the other way around...

I also (in the end) want to be able to drag the contact from the left into the VF page at the bottom (currently a white space), which will execute some logic also...

I have the following code at the moment:

<apex:page controller="ContactsDraggableController" docType="html-5.0" showHeader="false" sidebar="false" standardStylesheets="false">
    <!-- JQuery -->
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" />
    <apex:includeScript value="https://code.jquery.com/ui/1.11.4/jquery-ui.js" />
    <apex:styleSheet value="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />

    <!-- Bootstrap -->
    <apex:includeScript value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" />
    <apex:styleSheet value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

    <style>
        .list-group, .list-group-item {
        width: 100%;
        }
    </style>

    <ul class="list-group">
        <apex:repeat value="{! techs }" var="c">
            <li class="technician list-group-item" onmouseover="$(this).addClass('list-group-item-info')" onmouseout="$(this).removeClass('list-group-item-info')" onclick="$('.display-none').hide('slow');$('.{! c.Id }').toggle('slow');">
                <a href="/{! c.Id }">
                    {! c.Name }
                </a>
                <div class="{! c.Id } display-none" style="display: none;">
                    <div>
                        Phone: {! c.Phone }
                    </div>
                    <div>
                        Email: {! c.Email }
                    </div>
                </div>
            </li>
        </apex:repeat>
    </ul>

    <script type="text/javascript">
    $(function(){
        $('.technician').draggable({
            helper: 'clone',
            revert: 'invalid',
            cursor: 'move',
            snap: 'parent',
            start: function(event, ui){
                ui.helper.css('z-index', '100000');
            }
        });
    });
    </script>
</apex:page>

The problem is that I don't know how to drag onto the parent... and I can't seem to find anything useful online :/