コンテンツの並び替えcoolie.jsで保存

サンプルはこちらから

並び替えの後、リロードしてみてください。

javascript

<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk="crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
$(function() {
    $(".sortable").sortable();
    $(".sortable").disableSelection();
    $(".sortable").sortable({
        update: function(ev, ui) {
            var updateArray =  $(".sortable").sortable("toArray").join(",");
            $.cookie("sortable", updateArray, {expires: 30});
        }       
    });
    if($.cookie("sortable")) {
        var cookieValue = $.cookie("sortable").split(",").reverse();
        $.each(
            cookieValue,
            function(index, value) {$('#'+value).prependTo(".sortable");}
        );
    }
});
</script>

css

.sortable{
	-webkit-column-count : 3;
	-webkit-column-gap : 15px;
	-moz-column-count : 3;
	-moz-column-gap : 15px;
	column-count : 3;
	column-gap : 15px;
}
.sortable li{
	list-style : none;
	display : inline-block;
	width : 100%;
	height : auto;
	border : 1px solid #277A93;
	list-style-type : none;
	cursor : grab;
	margin-bottom : 20px;
	background : #fff;
}
.sortable li:active {
	cursor : grabbing;
}


.sortable h2{
	color : #fff;
	text-align : center;
	background : #277A93;
	padding : 10px 0;
	font-size : 20px;
	letter-spacing : normal;
	margin : 0 0 15px;
}
.ui_box{
	padding : 0 20px 10px;
}

html

<ul class="sortable">
<li id="1">
  <h2>title1</h2>
  <div class="ui_box">
    <p>内容内容内容内容内容内容内容内容内容</p>
  </div>
</li>

<li id="2">
  <h2>title2</h2>
  <div class="ui_box">
    <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
</li>

<li id="3">
  <h2>title3</h2>
  <div class="ui_box">
    <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
</li>

<li id="4">
  <h2>title4</h2>
  <div class="ui_box">
    <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
</li>

<li id="5">
  <h2>title5</h2>
  <div class="ui_box">
    <p>内容内容内容内容内容内容内容内容内容</p>
  </div>
</li>

<li id="6">
  <h2>title6</h2>
  <div class="ui_box">
    <p>内容内容内容内容内容内容内容内容内容</p>
  </div>
</li>

<li id="7">
  <h2>title7</h2>
  <div class="ui_box">
    <p>内容内容内容内容内容内容内容内容内容</p>
  </div>
</li>
</ul>