CODEWITHSUNDEEP
jqueryangularjsjquery-uijquery-ui-sortableangular-ui-sortable
Ghazanfar Khan
Ghazanfar Khan

Reputation: 3718

Cloning items into connected list that allow duplicates using angular ui-sortable

I am working on drag n drop functionality using . I am using connected list example provided here in GitHub repo.

In list#1 I have list of HTML controls and list#2 is empty. By default when I drag any item from list#1 it will remove from list#1 and add in list#2. I do not want to remove it from the list instead a copy of it adds in list#2. And list#2 items cannot be dragged back on list#1.

Here is my code

<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"
};

Need help how do I achieve that.

Upvotes: 1

Views: 584

Answers (1)

T J
T J

Reputation: 43156

To allow duplicates, you should use track by $index in the second list's ng-repeat.

For cloning you should do the following in update callback:

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);
  }

finally, to disable sorting from list#2 to list#1, you should use different options for list#2 without the connectWith property. Or make the connectWith value unique, something which is not applicable to list#1. (If you look at the below demo I'm deleting connectWith from options for second list)

Codepen Demo

Upvotes: 2

Related Questions