ドラッグ＆ドロップで躓いています（使用言語：Ruby、Rails)

Question

前提・実現したいこと

現在、Trelloのコピーを練習のため開発中です。
ボードの中にリストを作成、リストの中にタスクを作成することはできたのですが、ドラッグ＆ドロップの実装で躓いています。ボードの孫であるタスクを同じリスト内でしか移動することができません。
Trelloのようにタスクを別のリストにも移動できるように実装したいです。
初学者なので丁寧な説明して頂けるとありがたいです。

該当のソースコード

<% @lists.each do |list| %>
	<strong><%= list.list_name %></strong><br>
	<hr>
	<ul id="sortable-<%= list.id %>" class="connectedSortable">
		<% list.tasks.each do |task| %>
			<li id="sortable-<%= task.id %>" class="ui-state-default">
				<%= task.task_name %>
			</li>
			<input type="hidden", class= "taskid", value="<%= task.id %>">
		<% end %>
	</ul>
	<details>
		<summary>タスク作成</summary>
		<%= form_for(@task, url: user_board_list_tasks_path(@user.id, @board.id, list.id)) do |f| %>
		<%= f.label :task_name %>
		<%= f.text_field :task_name %>
			<%= f.submit "入力" %>
		<% end %>
	</details>
	<hr>
<% end %>

application.js
$(function() {
    var task = $('.taskid').val();
    $("#sortable-" + task).sortable({
        connectWith: ".connectedSortable"
    }).disableSelection();
});

試したこと

jQuery UIを使用して実装を試しています
参考URL：
リンク内容

補足情報（FW/ツールのバージョンなど）

Ruby2.5.7
rails 5.2.3

gem: jquery-rails
jquery-ui-rails

Answer 1

リンクの内容を見ると

  <script>
  $( function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  } );
  </script>

となっていて，#sortable1や#sortable2はulのidだと思います。

$("#sortable-" + task)

だとliのidをとってきてしまっていることが原因ではないでしょうか？

また，今のままだとulとliのidが被ってしまう恐れがあるので，もう少し違う名前にすると良いと思います。

Comments

[comuny]

解答ありがとうございます。
無事解決することができました。
もっと注意してコード読むことを心がけます。

id変更もアドバイス通り区別できるように変更しました。
ありがとうございました。

[k-810]

よかったです！