Question

我的ui-sortable有一个很大的问题。

如果我有一个小清单（如他们网站上的示例中所示：jquery sortable）

然后没有问题。

然而，如果列表变得足够长并且用户必须滚动以查看总列表，那么当我尝试拖动元素时它会自动滚动到底部并且我很难再次启动它。 / p>

每当我尝试向上滚动时，它会在几秒钟后向下滚动。所以我的问题是，有人曾尝试过这个并知道修复它吗？（我知道没有太多代码，但如果你真的需要代码来解决这个问题，我很乐意提供我所拥有的代码）

拖动元素：

<ul  class="list-group gutter list-group-lg list-group-sp" ui-sortable="sortable" ng-model="academyModules">
    <li class="list-group-item module"  style="padding-top: 15px; padding-bottom: 0px; display: block" ng-repeat="module in academyModules" draggable="true">
        <div class="clear" ng-if="module.module.module_type_id != null">
            <span class="pull-left"><i class="fa fa-sort text-muted fa m-r-sm"></i> </span>
            <div class="col-md-4 col-xs-10">
                <button class="btn btn-s-xs btn-rounded m-r-lg" ng-class="module.module_type.color || module.module.module_type.color"
                        style="padding:  2px 10px; min-width: 90px;">{{module.module_type.name || module.module.module_type.name}}
                </button>
                <span class="text text-muted" translate="TERMS.MODULE"></span>
            </div>
            <span class="pull-right">
                <a class="btn btn-md pull-right no-padder" ng-really-message="{{ 'ACADEMY.EDIT.MODULES.DELETE_WARNING' | translate }}" tooltip="{{ 'TOOLTIP.DELETE' | translate }}" ng-really-click="deleteModule($index, module);">
                    <i class="fa fa-times text-danger text"></i></a>
            </span>
            <div class="col-lg-5 col-xs-11">
                <div class="input-group m-b">
                    <div class="input-group-btn">
                        <button class="btn btn-info" ng-click="changeModule(module)" data-toggle="modal"
                                data-target="#modal_select_module" style="font-size: 10px;"
                                type="button"><i class="fa fa-plus"></i><span translate="ACADEMY.EDIT.MODULES.CHANGE_MODULE"></span>
                        </button>
                    </div>
                    <!-- /btn-group -->
                    <input type="text" class="form-control input-sm" value="{{module.module.name}}" style="height: 27px" disabled="">
                </div>
            </div>
        </div>
        <div class="clear" ng-if="module.module.module_type_id == null">
            <span class="pull-left"><i class="fa fa-sort text-muted fa m-r-sm"></i> </span>

            <div class="col-md-4 col-xs-10">
                <button class="btn btn-s-xs btn-rounded m-r-lg bg-grey"
                        style="padding:  2px 10px; min-width: 90px;" translate="TERMS.COURSE">
                </button>
                <span class="text text-muted" translate="TERMS.COURSE"></span>
            </div>
            <span class="pull-right">
                <a class="btn btn-md pull-right no-padder" title="" ng-really-message="{{ 'ACADEMY.EDIT.COURSES.DELETE_WARNING' | translate }}" tooltip="{{ 'TOOLTIP.DELETE' | translate }}" ng-really-click="deleteCourse($index, module);"><i
                        class="fa fa-times text-danger text"></i></a>
            </span>
            <div class="col-lg-5 col-xs-11">
                <div class="input-group m-b">
                    <div class="input-group-btn">
                        <button class="btn btn-info" ng-click="changeCourse(module)" data-toggle="modal"
                                data-target="#modal_select_module" style="font-size: 10px;"
                                type="button"><i class="fa fa-edit"></i><span translate="ACADEMY.EDIT.COURSES.EDIT"></span>
                        </button>
                    </div>
                    <!-- /btn-group -->
                    <input type="text" class="form-control input-sm" value="{{module.name}}" style="height: 27px" disabled="">
                </div>
            </div>
        </div>
    </li>

</ul>

Jquery u-i可以自动滚动到底部

0 个答案: