如果頁面之前滾動，則角度ui-sortable拖動時的偏移量

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;

為我整理的可排序項目

Answer 2

問題是，你要調用refreshPositions上ui.item.sortable這是一個對象，UI可排序的用途來存儲數據。 您應該在可排序的元素上調用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 3

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

並添加“ position：relative”可排序塊