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

Question

I am working on drag n drop functionality using angular-ui-sortable. 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.

What do you mean "And list#2 items cannot be dragged back on list#2."? — T J
– T J, Commented Jun 28, 2016 at 8:56
Means list#2 item sortable option to another list should be cancel — Ghazanfar Khan
– Ghazanfar Khan, Commented Jun 28, 2016 at 8:57

T J · Accepted Answer · 2016-06-28 09:55:18Z

2

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

edited Jun 28, 2016 at 9:55

answered Jun 28, 2016 at 9:42

T J

43.2k13 gold badges87 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ghazanfar Khan Over a year ago

One problem in your solution is that if I drag list#2 up and down it creates new element ?? how to solve it ?

Ghazanfar Khan Over a year ago

I have solved it by putting a check if (_listName != 'B') { ui.item.sortable.cancel(); var model = angular.copy(ui.item.sortable.model); ui.item.sortable.droptargetModel.splice(ui.item.sortable.dropindex, 0, model); }

Collectives™ on Stack Overflow

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

1 Answer 1

Codepen Demo

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related