【javascript】sortableで要素の並び替えを実装

Question

###前提・実現したいこと
connectWithを利用して要素間で並び替えを実装しています。
「すべて移動」「すべて戻す」のボタンを押すと

A要素→B要素へ
B要素→A要素へ

と移動し、B要素のdata-clumn-nameを都度取得するようにしたいです。

###発生している問題・エラーメッセージ
appendToを利用して、要素間の移動はできています。
しかし、updateイベントを実行することができません。

###試したこと

$(document).on "turbolinks:load", ->
  $('#list1, #list2').sortable
    connectWith: '.list'
    placeholder: 'ph'
    update:(e,ui) ->
      result = $('#list2').sortable('toArray', attribute: 'data-clumn-name').join(',')
      $("#csv_export_template_clumn_names").val(result);
  $("#allMove").on "click", ->
    $('#list1 li').each ->
      $(this).appendTo '#list2'
      return
  $("#allBack").on "click", ->
    $('#list2 li').each ->
      $(this).appendTo '#list1'

###補足情報(言語/FW/ツール等のバージョンなど)
参考サイト
http://jsfiddle.net/h66bmtf7/4/

sortable
http://api.jqueryui.com/sortable/#method-cancel

Comments

[jun68ykt]

sortable のような、動きを伴うUIがらみのJSの質問では、もし可能であれば、「ここまで出来ています。」というコードも jsfiddle に上げて頂けますと回答しやすい（＝回答者にとって「何が問題になっているか」を把握しやすい）質問になるかと思います。

[ssk]

jun68ykt様 ありがとうございます。jsfiddleを利用して再投稿いたします。

[jun68ykt]

お手数ですが、お願いいたします。

Answer 1

その都度値を取得するだけならこんな感じでいかがでしょうか
なんらかの理由でupdateイベントを呼ぶ必要がある場合は別の実装が必要です
=>サンプルコード

あと気になったので clumn -> column になおしておきました

onUpdate = (e, ui) ->
  result = $("#list2").sortable("toArray", attribute: "data-column-name").join(",")
  $("#csv_export_template_column_names").val(result)

$("#list1, #list2").sortable
  connectWith: ".list"
  placeholder: "ph"
  update: onUpdate

$("#allMove").on "click", ->
  $("#list1 li").each ->
    $(this).appendTo "#list2"
    onUpdate()

$("#allBack").on "click", ->
  $("#list2 li").each ->
    $(this).appendTo "#list1"
    onUpdate()

Comments

[ssk]

返信が遅くなってしまい、申し訳ございません。
お陰様で実現することができました。