jQuery Sortable で after|beforeで追加したconectWithのエレメントに移動できない

Question

下記のようなコードで 並び替え対象のitemは追加したエレメントは移動できます。
しかし、移動先となるareaを追加した場合、itemを移動させることができません。
どのようにすれば“新しい移動先”を追加することができるでしょうか。

<script>
$(function() {
    $("div.area").sortable({
        items: "div.item",
        connectWith:'div.area'
    })
});
</script>
<style>
    .area {
        height: 100px;
        border: 1px solid red
    }
    .item {
        width : 50px;
        height: 50px;
        border: 1px solid blue;
        display: inline-block;
    }
</style>

<button onclick='$(".area:first").append("<div class=item></div>")'>add item</button>
<button onclick='$(".area:last").after("<div class=area></div>")'>add area</button>
<div class="area">
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="area"></div>
<div class="area"></div>

Answer 1

$(function() の中に書いた処理は、このページが読み込まれた直後に１度だけ実行されます。なので、最初からある<div class="area">にはイベントハンドラが付加されますが、後から追加した者には付加されません。なので、after()をした後でsortable()を実行する必要があります。

function setSortable() {
    $("div.area").sortable({
        items: "div.item",
        connectWith:'div.area'
    })
}
$(function() {
    setSortable();
});
<button onclick='$(".area:last").after("<div class=area></div>");setSortable();'>add area</button>

Comments

[退会済みユーザー]

うまくいきました。ありがとうございます。
sortableを再起動させるような感じですね。