angular 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

问题是，您正试图在 ui.item.sortable 上调用 refreshPositions，这是 ui-sortable 用来存储数据的对象。您应该在可排序的元素上调用 refreshPositions 。

尝试

<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" 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 = {
                start: function(event, ui) {
                    $(this).sortable({
                            sort: function(event, ui) {
                                var $target = $(event.target);
                                if (!/html|body/i.test($target.offsetParent()[0].tagName)) {
                                    var top = event.pageY - $target.offsetParent().offset().top - (ui.helper.outerHeight(true) / 2);
                                    ui.helper.css({'top' : top + 'px'});
                                }
                            }
                    });

                }
            };


});

Answer 2

添加样式

overflow-y: auto;

为我修复的可排序项目

Answer 3

$(".sortable").sortable({
      sort: function(event, ui) {
           ui.position.top = ui.position.top + $(window).scrollTop();
      },
});

并添加 "position: relative" 可排序块

angular ui-如果页面之前滚动过，拖动时可排序的偏移量

angular ui-sortable offset on drag if page scrolled before

javascript

css

jquery

jquery-ui

angular-ui-sortable