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

Question

我正在使用angular-ui-sortable 开发拖放功能。我正在使用 GitHub 存储库中提供的 here 连接列表示例。

在 list#1 中，我有 HTML 控件列表，而 list#2 为空。默认情况下，当我从 list#1 中拖动任何项目时，它将从 list#1 中删除并添加到 list#2 中。我不想将其从列表中删除，而是将其副本添加到列表#2 中。并且 list#2 项目不能在 list#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);
  }

---

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

Codepen Demo