jQuery-uiを使ったドラッグ＆ドロップが可能なカラムをposition:fixed;overflow:scroll;を適用したwrapperの外に最前面で出したい

Question

jQuery-uiを使いカラムを移動可能にして、カラムのあるwrapperに画面のスクロールをした際も追従するようにposition:fixedとカラムが多くなった場合にも表示できるようにwrapperにoverflow-y:scrollを適用しました。
しかし、移動するカラムがwrapperの外に表に出ず、裏に回って移動する形となりました。(カラムのz-indexがwrapperの周りの要素よりも低くなっているような挙動です。)

カラムを最前面に出す方法はありませんでしょうか？
よろしくお願いいたします。

//問題のwrapperです
<div class="bookWrapper">
    <p id="bookmarkError"></p>
    <h1 id="bookmarkTitle">ブックマーク</h1>
    <div class="bookmark">
        <div class="bookmarkColumn"></div>
        <ul class="bookUl">
            //このカラムを移動させます
            <li class="bookLi"></li>
            <?php if (isset($showResult)) : ?>
                <?php foreach ($showResult as $show) : ?>
                    <li class="bookLi">
                        <div class="bookmarking">
                        </div>
                    </li>
                <?php endforeach ?>
            <?php endif ?>
        </ul>
    </div>
</div>

.bookWrapper{
    position: fixed;
    top:53px;
    right:0;
    left:10px;
    bottom:0;
    width:49%;
    height:auto;
    display:inline-block;
    overflow-y:scroll;
    overflow-x:visible;//hiddenにした場合でも一緒でした
    border:1px solid black;
    float:left;
    padding-bottom:30px;
    z-index: 1;
}

.bookLi{
    position:relative;
    z-index:999999999999 !important;//効きません
}

.bookmarking{
    height:auto;
    min-height: 40px;
    position: relative;
    border:1px solid black;
    background-color: rgba(255,255,255,0.3);
    z-index:999999999;//効きません
    width:500px;
    margin-top:10px;
    text-align: center;

$('.bookUl').sortable({
                    connectWith: '.dragUl',
                    placeholder: 'memoDiv',
　　　　　　　　　　　　//これを設定しなければカラム移動時にwrapperが無限に広がります
                    scroll:false,

Answer 1

jQuery-uiのオプションを使うことで望んでいるように機能しました。
wrapperを跨ぐ際にoverflowをvisibleにし、wrapper内での並び替えやカラムがwrapperに戻ってきた時にoverflow:scrollにcssを動的に変更しました。

$('.bookUl').sortable({
                    connectWith: '.dragUl',
                    placeholder: 'memoDiv',
                    scroll:false,
                    //追加はここから
                    out:function(){
                        $('.bookWrapper').css('overflow-y','visible');
                    },
                    over:function(){
                        $('.bookWrapper').css('overflow-y','scroll');
                    },
                    stop:function(){
                        $('.bookWrapper').css('overflow-y','scroll');
                    },
                    //ここまで
                    update: function(ev, ui) {
                    });