具有 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;
}