jQuery UI Library Sortable Sortable Grid with flex layout


Example

This used the flex layout with the sortable to create a grid of responsive boxes that can be moved around by dragging and dropping.

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