使用 angular ui-sortable 将项目克隆到允许重复项的连接列表中

Question

我正在使用 GitHub 存储库中的 angular-ui-sortable. I am using connected list example provided 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

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

---

对于克隆，您应该在 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）

Codepen Demo