ui-sortable自动滚动到页面底部

时间:2015-07-10 11:48:51

标签: javascript jquery html css jquery-ui

好的,我有以下列表:

                <ul  class="list-group gutter list-group-lg list-group-sp" ui-sortable="" ng-model="academyModules">
                    <li class="list-group-item module"  style="padding-top: 15px; padding-bottom: 0px;" ng-repeat="module in academyModules" draggable="true">
                        <div class="clear" ng-if="module.module.module_type_id != null">
                            <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">Modul</span>
                            </div>
                            <span class="pull-right">
                                <a class="btn btn-md pull-right no-padder" ng-really-message="Er du sikker du vil slette modulet?" 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> Skift modul
                                        </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">
                            <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;">Kursus
                                </button>
                                <span class="text text-muted">Modul</span>
                            </div>
                            <span class="pull-right">
                                <a class="btn btn-md pull-right no-padder" title="" ng-really-message="Er du sikker du vil slette kurset?" 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> Ret kursus
                                        </button>
                                    </div>
                                    <!-- /btn-group -->
                                    <input type="text" class="form-control input-sm" value="{{module.name}}" style="height: 27px" disabled="">
                                </div>
                            </div>
                        </div>
                    </li>

                </ul>

这会产生一个如下所示的列表:

enter image description here

现在,当项目很少时,这种方法很好,但是当列表足够大并且滚动拖放时会出现混乱。当我在页面中间拾取一个项目时,它总是滚动到底部,很难再次登上顶部!

之前是否有人尝试过此操作或知道修复方法?

0 个答案:

没有答案