Ian Lewis

Ian Lewis

Engineer in Tokyo

© 2024

jQueryUIのsortableウィジェット接続の仕方
Apr 24, 2009

最近、jQueryUIをバリバリ使ってて、sortableというウィジェットで簡単にできることがあまりにも面白い。

$("#my-list").sortable({
  axis: "x",
});

axisは必須じゃないけど、オプションに渡す場合の例にいいのかなと思って入れた

draggableというウィジェットもあって、これであるオブジェクトをsortableウィジェットにdragで入れられる。

$("#my-item").draggable({
  connectToSortable: "#my-list",
});

同じくsortableはsortableと接続して、一つのsortableから、別のsortableに移動ができる。

$("#my-list").sortable({
  connectWith: "#my-other-list",
});

同じ書き方で、二つのsortableを接続しあうこともできる。これで、オブジェクトを自由にsortableからdragしたり、dropしたり、結構面白いインタフェースができる。

$("#my-list").sortable({
  connectWith: "#my-other-list",
});

$("#my-other-list").sortable({
  connectWith: "#my-list",
});

DEMO >>