Использование JQuery Draggable сортируемый с div

Я пытаюсь создать сетку, заполненную "виджетами", которые можно перетаскивать и сортировать, в идеале, с какой-то помеченной пунктирной границей, куда они собираются идти.

В настоящее время моя разметка HTML выглядит следующим образом:

<div id="widget-1" class="box grid_8">
    <div class="box-header">
        <i class="fa fa-dropbox fa-fw"></i> <p>New Orders</p>

    </div>
    <div class="box-content">
        <h1>926</h1>
        <h2>New <strong>Orders</strong></h2>
        <p class="grey-text">Need Your Attention</p>
        <a href="#" class="button">Take Me There</a>
    </div>
    <div class="box-footer">
        <a href=""> <i class="fa fa-cog fa-fw"></i> </a>

    </div>
</div>

каждая ячейка разделяется на содержимое заголовка и нижний колонтитул - все одинаковой высоты.

Я пытаюсь получить его, чтобы я мог использовать заголовок в качестве дескриптора и перемещать всю ячейку вокруг, в идеале отображая местозаполнитель своей новой позиции.

Ниже приведен CSS для полей:

/* ==========================================================================
   Boxes
   ========================================================================== */

.box {
    margin-top:10px;
    border: 1px solid #E0E0CF;
    background-color:#fff;
    height:250px;
    width:386px;
}

.box-2{
    margin-top:10px;
    border: 1px solid #E0E0CF;
    background-color:#fff;
    height:30px;

}

.box-static{

    margin-top:10px;
    border: 1px solid #E0E0CF;
    background-color:#fff;
    height:100%;


}


.box-header{
    border-bottom:1px solid #E0E0CF;
    height:30px;

}

.box-header i{
    float:left;
    margin:6px;
    color:grey;
}

.box-header p{
    float:right;
    margin:10px;
    font-size:8px;
    color:grey;
}

.box-header-static{
    border-bottom:1px solid #E0E0CF;
    height:60px;
}

.box-header-static i{
    float:left;
    margin:6px;
    color:grey;
}

.box-header-static h4{
    float:left;
    margin:15px 0px 0px 0px;
    line-height: 30px;
}


.box-header-static p{
    float:right;
    margin:10px;
    font-size:8px;
    color:grey;
}



.box-content{
    width:100%;
    height:190px;
    overflow:hidden;
    text-align:center;

}
.box-content-static{
    width:100%;
    height:100%;
    overflow:hidden;
    text-align:center;

}

.box-image{
    width:100%;
    height:100%;

}

.box-content p{
    position:relative;
    margin:11px 12px 13px 10px;

}

.box-footer{
    height:30px;
    border-top:1px solid #E0E0CF;
}
.box-footer i{
    height: 15px;
    float: right;
    border-left: 1px solid rgb(224, 224, 207);
    padding: 7px;
    position: relative;
    color: grey;
}

#widget-1 {


}
#widget-2 h3{
    margin:10px;
    position:relative;

}
#widget-2 span{

}
#widget-2 button{



}
#widget-3{


}
#widget-4{


}
.top-left-heading p{
    position: relative;
    margin:10px;

}
.top-left-heading p{
    position: absolute;
    top: 150px;
    left: 434px;
}

Js:

$(function() {
    $("#widget-1").sortable({containment: "parent"});
    $("#widget-1").disableSelection();
});