Cloning items into connected list that allow duplicates using angular ui-sortable
<p>I am working on drag n drop functionality using <a href="/questions/tagged/angular-ui-sortable" class="post-tag" title="show questions tagged &#39;angular-ui-sortable&#39;" rel="tag">angular-ui-sortable</a>. I am using connected list example provided <a href="https://github.com/angular-ui/ui-sortable" rel="nofollow">here</a> in GitHub repo.</p>

<p>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.</p>

<p>Here is my code</p>

<pre class="lang-html prettyprint-override"><code>&lt;div class="floatleft"&gt;
  &lt;div ui-sortable="sortableOptions" class="apps-container screen floatleft" ng-model="list1"&gt;
    &lt;div class="app" ng-repeat="app in list1"&gt;{{$index}} {{app.title}}&lt;/div&gt;
  &lt;/div&gt;
  &lt;div ui-sortable="sortableOptions" class="apps-container screen floatleft" ng-model="list2"&gt;
    &lt;div class="app" ng-repeat="app in list2"&gt;{{$index}} {{app.title}}&lt;/div&gt;
  &lt;/div&gt;
  &lt;div style="clear: both;"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<pre class="lang-js prettyprint-override"><code>$scope.list1 = [{
  name: 'Checkbox'
}, {
  name: 'text'
}, {
  name: 'email'
}, ]

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

<p>Need help how do I achieve that.</p>