jQuery Sortable在祖先包装器上对项目进行排序

Question

我有以下HTML结构（例如）：

<div id="box-two" class="dashboard-box">
    <h1>
        <i class="glyphicon glyphicon-minus-sign"></i>
        List One
    </h1>
    <div class="dashboard-box-content">
        <ul id="list-one" class="users-list">
            <li> User One</li>
            <li> User Two </li>
            <li> User Three </li>
            <li> User Four </li>           
        </ul>
        <div class="clearfix"></div>
    </div>
</div>
<div id="box-two" class="dashboard-box">
    <h1>
        <i class="glyphicon glyphicon-minus-sign"></i>
        List Two
    </h1>
    <div class="dashboard-box-content">
        <ul id="list-two" class="users-list">
            <li> User Five </li>
            <li> User Six </li>
            <li> User Seven </li>
            <li> User Eight </li>           
        </ul>
        <div class="clearfix"></div>
    </div>
</div>

和javascript

jQuery('.users-list').sortable({ connectWith: ".users-list" });

列表项左侧浮动，我希望能够通过列表移动项目，并在我div.dashboard-box项目正常而不是ul.user-list上方时将其捕捉。

以身作则： 我想将用户一从list-one移至list-two。我正在拿用户一并拖动它。当我超过#box-two（尚未超过#list-two）时，用户One会抓住（占位符）到list-two。

有可能制作此功能吗？

提前致谢。