Question

我正在使用angular-ui-sortable处理拖放功能。我在GitHub repo中使用了here提供的连接列表示例。

在列表＃1中，我有HTML控件列表，列表＃2为空。默认情况下，当我从列表＃1中拖动任何项目时，它将从列表＃1中删除并添加到列表＃2中。我不想从列表中删除它，而是在列表＃2中添加它的副本。并且列表＃2项目无法在列表＃1上拖回。

这是我的代码

<div class="floatleft">
  <div ui-sortable="sortableOptions" class="apps-container screen floatleft" ng-model="list1">
    <div class="app" ng-repeat="app in list1">{{$index}} {{app.title}}</div>
  </div>
  <div ui-sortable="sortableOptions" class="apps-container screen floatleft" ng-model="list2">
    <div class="app" ng-repeat="app in list2">{{$index}} {{app.title}}</div>
  </div>
  <div style="clear: both;"></div>
</div>

$scope.list1 = [{
  name: 'Checkbox'
}, {
  name: 'text'
}, {
  name: 'email'
}, ]

$scope.list2 = [];
$scope.sortableOptions = {
  placeholder: "app",
  connectWith: ".apps-container"
};

需要帮助我如何实现这一目标。

Answer 1

要允许重复，您应该在第二个列表track by $index中使用ng-repeat。

对于克隆，您应该在update回调中执行以下操作：

update: function(e, ui) {
    if(ui.item.sortable.isCanceled()) return;
    ui.item.sortable.cancel();
    var model = angular.copy(ui.item.sortable.model);
    ui.item.sortable.droptargetModel.splice(ui.item.sortable.dropindex, 0, model);
  }

最后，要禁用从列表＃2到列表＃1的排序，您应该为列表＃2使用不同的选项而不使用connectWith属性。或者使connectWith值唯一，这不适用于列表＃1。（如果您查看下面的演示，我将从第二个列表的选项中删除connectWith）

将项目克隆到连接列表中，允许使用角度ui-sortable进行重复

1 个答案:

Codepen Demo