jQuery перетаскиваемый без выделения выделения при анимации контейнера

Итак, у меня есть два столбца, перетаскиваемые и еще один с выпадающими. У меня это работает так, как я хочу, когда начинается перетаскивание, сдвиньте контейнер влево, показав столбец с возможностью удаления.

Однако, когда выпадающий столбец скользит... если вы энергично не встряхиваете перетаскиваемый столбец, выпадающие элементы НЕ выделяются.

Вот jsFiddle для иллюстрации проблемы.

JavaScript

$('#first_list > ul > li').draggable({
    revert:true,
    helper:  function () {
        var helper = $('<div class="helper">' + $(this).clone().html() + '</div>');
        return helper.appendTo('body').css({'zIndex':5});
    },
    start:function(event,ui) {
        $('#inner-container').animate({left:'-200px'},'fast');
    },
    stop:function(event,ui) {
        $('#inner-container').animate({left:'0'},'fast');
    }
});

$('#second_list li').droppable({
    hoverClass:'active_drop',
    drop:function(event,ui) {
        $('#result_list').append('<li>' + ui.helper.text() + ' on ' + $(this).text() + '</li>');
    }
    });
});

HTML

<div id="container">
<div id="inner-container">
    <div class="column" id="first_list">
        <ul>
            <li><span></span> First</li>
            <li><span></span> Second</li>
            <li><span></span> Third</li>
            <li><span></span> Fourth</li>
        </ul>
    </div>
    <div class="column" id="second_list">
        <ul>
            <li><span></span> First</li>
            <li><span></span> Second</li>
            <li><span></span> Third</li>
            <li><span></span> Fourth</li>
            </ul>
        </div>
    </div>
</div>
<ul id="result_list"></ul>