Angular UI.Sortable取消不会重绘原始订单

Question

我使用Angular UI.Sortable进行排序列表。在列表中，最后一个元素不是由ng-repeat生成的，而是手动创建的。拖动不需要此元素。取消排序后，它应保持相同的位置。

这是我的代码

{{#each blog.recent_posts}}
        {{#if thumbnail}}
            <figure class="blog-thumbnail">
                <a href="{{url}}">
                    <img src="{{getImage thumbnail 'blog_size'}}" alt="{{thumbnail.alt}}" title="{{thumbnail.alt}}">
                </a>
            </figure>
        {{/if}}
    {{/each}}

HTML

$scope.sortable = {
                items: '> li.draggable',
                forcePlaceholderSize: true,
                forceHelperSize: true,
                placeholder: 'card-drop-placeholder',
                connectWith: '.cards',
                dropOnEmpty: true,
                tolerance: 'intersect',
                scroll: true,
                scrollSensitivity: 40,
                disabled: false,
                handle: '.handle',
                helper: 'clone',
                cursor: 'move',
                start: onCardStartDrag,
                stop: onCardStopDrag,
                update: onCardStopDragged,
                receive: onDropToAnotherGroup
            };

取消分类＆＃39;空卡＆＃39; list元素有时会显示在列表的第一个位置。

取消逻辑如下

<ul class="cards" ui-sortable="sortable" ng-model="group.cards" group-id="{{ group.groupId }}">
<li ng-repeat="card in group.cards | searchFor : searchText track by $id(card)" ng-class="{'card-with-alerts':card.alert}"
    class="draggable">
    <card-view card="card" status="cardStatus" view="display"></card-view>
</li>
<li>
    <div class="card empty-card">
        <div class="card-container">
            <a href="#" context-menu="false" ng-click="enrollOrCreateCourse($event)">+ {{ enrollText }}</a>
        </div>
    </div>
</li>