标签: angular-ui-sortable

我有两个连接的ui可排序列表.当其中一个列表为空时,我需要显示一条消息; 当拖动时悬停该空列表时,我需要显示一个样式化的放置目标并隐藏空列表消息.我能够编写绝大多数代码,这里有一个简化的Codepen工作.

问题在于,当您从填充列表中拖动空列表然后再次移出时,空列表会显示空列表占位符和样式化放置目标.这是一个截屏:

问题的根源似乎在于我计算sortableList指令的列表是否为空:

scope.isEmpty = function() {
  if (!scope.attachments) {
    return true;
  } else if (scope.dragDirection === 'drag-out' && !scope.hovered) {             
    return scope.attachments.length <= 1;
  } else if (scope.hovered) {
    return false;
  } else {
    return scope.attachments.length === 0;
  }
};

请注意,我正在跟踪范围上的状态并使用$ apply来确保DOM更新如下:

function onDragStart() {
  scope.$apply(function() {
    scope.dragDirection = 'drag-out';
  });
}

function onDragStop() {
   scope.$apply(function() {
    scope.dragDirection = '';
  });
}

function onDragOver() {
  scope.$apply(function() {
    scope.hovered = true;
  });
}

function onDragOut() {
  scope.$apply(function() { …

有没有办法设置一个带有角度ui可排序的回调函数？我想在下面的tbody标签中添加ng-update ="foo()",并在列表更改时运行foo.

<tbody id="existingStockResults" ui-sortable ng-model="processes">
    <tr ng-repeat="process in processes" ng-class="{odd: $index%2 == 0, even: $index%2 != 0}">
        <td>{{process.process}}</td>
        <td>{{process.vendor}}</td>
        <td>{{process.desc}}</td>
            <td>{{process.cost}}</td>
        <td><a href="#" ng-click="editProcess($index)">edit</a></td>
        <td><a href="#" ng-click="removeProcess($index)">remove</a></td>
    </tr>
</tbody>

谢谢!

我有这个json结构:

{  
   "items":[  
      {  
         "category":"Category 1",
         "name":"01",
         "id":"46701a72410c"
      },
      {  
         "category":"Category 2",
         "name":"02",
         "id":"9a18ffe9f148"
      },
      {  
         "category":"Category 2",
         "name":"03",
         "id":"de3a49a458cc"
      },
      {  
         "category":"Category 3",
         "name":"04",
         "id":"bb06b1eec9c8"
      },
      {  
         "category":"Category 3",
         "name":"05",
         "id":"92973f4cfbfc"
      },
      {  
         "category":"Category 3",
         "name":"06",
         "id":"b06bbb86d278"
      }
   ],
   "categories":[  
      {  
         "isCollapsed":false,
         "name":"Category 1"
      },
      {  
         "isCollapsed":false,
         "name":"Category 2"
      },
      {  
         "isCollapsed":false,
         "name":"Category 3"
      }
   ]
}

我正在尝试使用angularjs ui.sortable添加排序行为.我希望类别和项目都可以排序.

我基于这个json创建了两个嵌套的有序列表,但我不知道如何解决可排序的设置.这个json结构有可能吗？

通过这些设置,我只解决了类别排序工作.问题是移动项目时(错误的位置或未定义).

$scope.sortableOptionsCategories = {
    stop: function(ev, ui) {
      console.log("Category moved.");
    }
  };

$scope.sortableOptionsItems = {
  connectWith: '.items-container',
  start: function(e, …

我发现如果页面是可滚动的,滚动后如果要拖放项目(为了对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"); …

我正在使用角度ui-sortable通过拖放来订购商品.正在排序的项目也附加了一个点击事件.在firefox中,丢弃其中一个项会触发click事件.在我测试的所有其他浏览器中,它没有.

这是一个简单的例子(检查控制台日志):

HTML

<div ng-app="app" ng-controller="ctrl as vm">
  <div ui-sortable="vm.sortableOptions" ng-model="vm.items">
    <div ng-repeat="item in vm.items">
      <a href ng-click="vm.log()">
        <div class="box"></div>
      </a>
    </div>
  </div>
</div>

CSS

.box {
  width: 100px;
  height: 100px;
  background: #ff0000;
  margin: 8px;
}

JS

angular.module('app', ['ui.sortable'])
    .controller('ctrl', [function () {
    var vm = this;

    vm.sortableOptions = {
        stop: function (e) {

      }
    }

    vm.items = [
        {},
        {},
        {},
        {}
    ];

    vm.log = function () {
        console.log('clicked');
    }
}]);

我希望不会发生这种情况.调用Event.preventDefault()不会像我希望的那样工作(可能是因为它是一个角度点击事件).

我当然可以在停止回调中设置某种标志(它似乎总是在点击处理程序之前触发)但我更喜欢一个更清洁的解决方案,因为它可能会有点难以跟踪.