如何配置/样式HTML5可排序网格，使其匹配演示

How to configure/style HTML5 Sortable grid so it matches the demo

本文关键字：网格 排序 何配置 配置 HTML5 样式      更新时间：2023-09-26

我想做一个可排序的网格，模仿http://farhadi.ir/projects/html5sortable/的功能，当你点击它时，元素会消失，它有那些虚线留在后面。但是，复制演示页面上计算的CSS并没有给我想要的效果。

是否有一些选项，我错过了初始化可排序或什么?

我只是用标准的方式初始化:

$('.sortable').sortable();

这是一个JSFiddle: http://jsfiddle.net/boeu4zdg/1/

正如作者在描述页上所说:

使用。sort -拖动和。sortable-placeholder选择符，分别更改拖动项及其占位符的样式。

要使其与demo中的样式完全相同，您需要以下样式(取自demo页面，删除了不需要的样式):

.sortable {
    width: 310px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.sortable.grid {
    overflow: hidden;
}
.sortable li {
    list-style: none;
    border: 1px solid #CCC;
    background: #F6F6F6;
    color: #1C94C4;
    margin: 5px;
    padding: 5px;
}
.sortable.grid li {
    line-height: 80px;
    float: left;
    width: 80px;
    height: 80px;
    text-align: center;
}
li.sortable-placeholder {
    border: 1px dashed #CCC;
    background: none;
}

相关文章：