如果页面之前滚动,则拖动时的角度ui可排序偏移量

Question

我发现如果页面是可滚动的,滚动后如果要拖放项目(为了对ng-repeat列表进行排序),则拖动的元素在y轴上显示的偏移量与我滚动的距离相同在拖动元素之前在页面下方.

我正在使用:https: //github.com/angular-ui/ui-sortable

这里记录了这个问题:https: //github.com/angular-ui/ui-sortable/issues/286

我似乎无法调用ui.item.sort('refreshPosition')方法.无论是通过编辑原始代码还是在我自己的控制器中确定是否应该这样做!？

这是我的相关模板代码:

    <script type="text/ng-template" id="form_field_ref2">
  <div ng-init="tmp = dbo.get(attobj.name)" ng-controller="sortController">
   <!-- <div ng-model="tmp" ui-sortable="{ 'ui-floating': 'auto'}">-->
    <div ng-model="tmp" ui-sortable="sortableOptions">
      <div ng-repeat="dbo2 in dbo.get(attobj.name) track by $index" id="sort_{{$index}}" style="float:left; padding-right: 3px; padding-bottom: 5px;">
        <div class="tag sortableTag">
          <a href="#/view/{{ dbo2.cid }}" target="_blank">{{ dbo2.displayName() }}</a>
          <a href="" class="glyphicon glyphicon-remove" ng-click="dbo.removeValue(attobj.name, $index)"></a>
        </div>
      </div>

    </div>
  </div>

  <div ng-include="'typeaheadtemplate2'" style="width: 100%;"></div>
</script>

控制器:

app.controller('sortController', function ($scope) {

  $scope.sortableOptions = {
    'ui-floating': 'auto',
    activate: function() {
        console.log("activate");
    },
    beforeStop: function() {
        console.log("beforeStop");
    },
    change: function() {
        console.log("change");
    },
    create: function() {
        console.log("create");
    },
    deactivate: function() {
        console.log("deactivate");
    },
    out: function() {
        console.log("out");
    },
    over: function() {
        console.log("over");
    },
    receive: function() {
        console.log("receive");
    },
    remove: function() {
        console.log("remove");
    },
    sort: function() {
        console.log("sort");
    },
    start: function(e, ui) {
        console.log("start");
        console.log(ui.item);
        var tag= '#'+ui.item.context.id;
        $(tag).sortable('refreshPositions');
        // $(this).sortable('refreshPositions');
    },
    update: function(e, ui) {
      console.log("update");

    },
    stop: function(e, ui) {
      console.log("stop");

    }
  };
});

尝试将突出显示的标记拖动为蓝色:

出现在标签原始位置的鼠标光标偏移(抱歉光标没有出现在图像上):

唯一选择器ID出错:

Answer 1

添加风格

overflow-y: auto;

到可排序项目为我修复它