sortableを使い列数をカウントしたいです。

Question

現在サイトを作っているのですが

sortableを使ってテーブル内のリストを移動できるようにしました。

列1	列2	列3
a	b	c

列1	列2	列3
a	c
b

↑今はこのような感じなのですが、列数をカウントして表示させたいと思ったのですがどうすればよいのでしょうか。初心者すぎて申し訳ないですがよろしくお願いします。

列1	列2	列3
1	1	1
a	b	c

列1	列2	列3
2	0	1
a	c
b

このように移動したらページを更新することなくリアルタイムで列数を反映させたいです。わかりづらくて申し訳ないです。

<style>

ul.jquery-ui-sortable {
    list-style-type: none;
    margin: 0 2px;
    padding: 2px;
    width: 250px;
height: 400px;
    float: left;
    background-color: beige;
    border: solid 1px #606060;
    font-size: 5px;

}
ul.jquery-ui-sortable li {
    margin: 3px;
    padding: 0em;
   cursor: move;
}


table {
    width: 245px;
    border: solid 1px #606060;
    font-size: 5px;
  text-align: left;

}

</style>

<ul class="jquery-ui-sortable">
ここに今の項目数を表示したい
    <li class="a">項目 1-1</li>
    <li class="a">項目 1-2</li>
    <li class="a">項目 1-3</li>
    <li class="a">項目 1-4</li>
    <li class="a">項目 1-5</li>

</ul>
<ul class="jquery-ui-sortable">
ここに今の項目数を表示したい
    <li class="a">項目 2-1</li>
    <li class="b">項目 2-2</li>
    <li class="b">項目 2-3</li>
    <li class="b">項目 2-4</li>
    <li class="b">項目 2-5</li>
</ul>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
<!--
$( function() {
    $( '.jquery-ui-sortable' ) . sortable( {
        connectWith: '.jquery-ui-sortable'
    } );
    $( '.jquery-ui-sortable' ) . disableSelection();
} );
// -->
</script>

現在はこのようになっています。

Comments

[yambejp]

> sortableを使ってテーブル内のリストを移動できるようにしました

の完成している部分だけでもソースを提示できませんか？

[tst1234]

追記いたしました。よろしくお願いいたします。

[yambejp]

テーブルのソートかと思ったのですがulのliをソートするのでしょうか？

[tst1234]

テーブルでも大丈夫ですが、liのほうが個人的にわかりやすいのでliのソートをして今の項目数を表記したいです。

[yambejp]

例示の「ここに今の項目数を表示したい」は
ul直下にテキストはおけないので不正な位置ですが、
ulの外側にspanかなにかおいてもいいのでしょうか？
<span>1</span>
<ul>
<li>・・・</li>
<ul>

[tst1234]

大丈夫です！ほかのところも変更してしまっても構いません。よろしくお願いいたします。

Answer 1

<style>
.wrap{display:flex;}
.jquery-ui-sortable{min-height:1em;}
</style>
<script>
$(function(){
  function countSortable(){
    $('.jquery-ui-sortable').each(function(){
      $(this).prev('span').text($(this).find('li').length);
    });
  }
  countSortable();
  $( '.jquery-ui-sortable' ).sortable({
  connectWith:'.jquery-ui-sortable',
  update: function(){
  countSortable();
  },
  });
});
</script>
<div class="wrap">
<div>
<span></span>
<ul class="jquery-ui-sortable">
    <li class="a">項目 1-1</li>
    <li class="a">項目 1-2</li>
    <li class="a">項目 1-3</li>
    <li class="a">項目 1-4</li>
    <li class="a">項目 1-5</li>

</ul>
</div>
<div>
<span></span>
<ul class="jquery-ui-sortable">
    <li class="a">項目 2-1</li>
    <li class="b">項目 2-2</li>
    <li class="b">項目 2-3</li>
    <li class="b">項目 2-4</li>
    <li class="b">項目 2-5</li>
</ul>
</div>
</div>

Comments

[tst1234]

ありがとうございます！