Question

我发现如果页面是可滚动的，滚动之后如果要拖放项目（为了对ng-repeat列表进行排序），则拖动的元素在y轴上显示的距离与距离一样多在拖动元素之前，我已向下滚动页面。

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

此处记录了此问题： https://github.com/angular-ui/ui-sortable/issues/286

我似乎无法调用ui.item.sort（＆＃39; refreshPosition＆＃39;）方法。无论是通过编辑原始代码还是在我自己的控制器中确定是否应该这样做！？

这是我的相关模板代码：

    <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，refreshPositions是ui-sortable用于存储数据的对象。您应该在可排序的元素上调用<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="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'});
                                }
                            }
                    });

                }
            };


});

控制器：

 $ids = array_map( function( $arr ){
                    return $arr["id"];
                }, $arr );

 echo '<pre>'; print_r($ids);

Answer 3

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

并添加“position：relative”可排序块

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

3 个答案: