具有 flex 布局的可排序网格

这使用了带有 sortable 的 flex 布局来创建响应框的网格，可以通过拖放来移动它们。

HTML

<div id="sortable">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div> 

JS

$(function(){
    $('#sortable').sortable({
        //pass all options in here
    });
});

CSS

#sortable{
    width: 500px;
    display: flex;
    flex-wrap: wrap;
}
#sortable div {
    margin: 10px;
    background-color: #f00;
    flex-basis: 100px;
    height: 100px;
}