Using JQuery Draggable sortable with div

Question

I am attempting to create a grid populated with 'widgets' that are draggable and sortable, ideally with some sort of placeholder dotted border of where they are going to go.

Currently my HTML markup looks as follows:

<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>

each box is split into header content and footer - all of equal height.

I am trying to get it so I can use the header as a handle and move the entire box around, ideally showing a placeholder of its new position too.

Below is the CSS for the boxes:

/* ==========================================================================
   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();
});

Answer 1

This should help you along a bit: http://jsfiddle.net/HgCjZ/1/

Main changes are the addition of:

.ui-state-highlight {
    background:#eee;
    border:1px dotted #333;
    height:250px;
    width:386px;
    margin:10px 0;
}

placeholder: "ui-state-highlight"