jquery-ui - 非表示の div を別のソート可能なリストに表示する方法

Question

灰色の ul リスト (親グループ) からソート可能なものを下の 2 つの黄色のリストにドラッグしています。黄色の並べ替え可能なリストにドラッグすると、灰色の並べ替え可能なリストに非表示のボタンが表示されるようにしようとしています。

私は表示なしの愚かな方法を使用しており、mouseUpイベントハンドラーを使用して非表示のボタンを表示しています。それは望ましい効果を達成していません。

非表示のボタンは下の黄色のボックスにのみ表示され、灰色の並べ替え可能なリストには表示されないことも重要です。

どんな助けでも大歓迎です。ありがとう。

http://jsfiddle.net/equiroga/4At6J/4/

//Show js

  $(function(){
  $(document).mouseup(function(){ 
  $('.button, .button2, .button3, .button4, .button5').show(); 
  });
 });


//Sortable js
$(function () {
$("#sortable1").sortable({
    helper: "clone",
    connectWith: ".sortable",

    start: function (event, ui) {
        $(ui.item).show();
        clone = $(ui.item).clone();
        before = $(ui.item).prev();
        position = $(ui.item).index();
    },
    beforeStop: function (event, ui) {
        if ($(ui.item).closest('ul#sortable1').length > 0) $(this).sortable('cancel');
    },
    stop: function (event, ui) {
        if (position == 0) $("#sortable1").prepend(clone);
        else before.after(clone);
    }
});

$(".sortable").sortable({connectWith: ".sortable:not('#sortable1')"});
});