Question

我正在尝试创建一个填充了“窗口小部件”的网格，这些网格是可拖动和可排序的，理想情况下会有一些占位符点缀的边框，以便它们去。

目前我的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();
});

Answer 1

这可以帮到你：http://jsfiddle.net/HgCjZ/1/

主要变化是增加：

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

placeholder: "ui-state-highlight"

使用JQuery Draggable可以使用div进行排序

1 个答案: