ドラッグ可能で並べ替え可能な「ウィジェット」が配置されたグリッドを作成しようとしています。理想的には、ウィジェットが移動する場所のある種のプレースホルダーの点線の境界線を使用します。
現在、私の 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;
}
J:
$(function() {
$("#widget-1").sortable({containment: "parent"});
$("#widget-1").disableSelection();
});