How to move items from one bucket to another- DragulaJS-Angular
<p>Hey I am using <a href="https://github.com/bevacqua/angular-dragula" rel="nofollow">DragulaJS-Angular</a> Version inorder to get the effect of drag&amp;drop between two buckets.
I have a couple of problems with this library.
First one,I can move items which only belong to the same bucket, if I defined different buckets then I can't move items between them.</p>

<p>Explanation regrading my code and my goal:</p>

<p>I have 3 divs, container-one , container-two &amp; container-third.</p>

<p>My main goals are:</p>

<p>1.Pass items only from container-one &amp; container two to container-third.</p>

<p>2.Items are not allowed to be transfer between container-one and container-two.</p>

<p>3.Also I would like to add class to every item which transfer from container-one || container two to container-third.</p>

<ol start="4">
<li>Also I would like to have the ability to clean the bags and reset the system.</li>
</ol>

<p>5.I want to make an animation of passing element from one bag to another,current animation isn't enough. I need to see the drag element also between the two containers and not only in one of the containers.
my code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var app =  angular.module("app",[angularDragula(angular)]);
app.controller('MainCtrl', function($scope, dragulaService) {
  dragulaService.options($scope, 'first-bag', {
      copy: true
    });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    float: left;
    width: 48%;
    margin-right: 2%;
    padding: 10px;
    min-height: 300px;
    background-color: rgba(0, 0, 0, 0.2);
    transition: opacity 0.4s ease-in-out;
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    box-sizing: border-box;
}
.container div {
    padding: 10px 15px;
    margin: 10px 0;
    background-color: rgba(0, 0, 0, 0.2);
}

.gu-transit {
  opacity: 0.2;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://rawgit.com/bevacqua/angular-dragula/master/dist/angular-dragula.js"&gt;&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
&lt;div ng-app="app" ng-controller="MainCtrl"&gt;
 &lt;div class='wrapper'&gt;
      &lt;div class='container' id="container-one" dragula='"first-bag"'&gt;
        &lt;div&gt;You can move these elements between these two containers&lt;/div&gt;
        &lt;div&gt;Moving them anywhere else isn't quite possible&lt;/div&gt;
        &lt;div&gt;There's also the possibility of moving elements around in the same container, changing their position&lt;/div&gt;
      &lt;/div&gt;
     &lt;div class='container' id="container-two" dragula='"first-bag"'&gt;
        &lt;div&gt;You can move these elements between these two containers&lt;/div&gt;
        &lt;div&gt;Moving them anywhere else isn't quite possible&lt;/div&gt;
        &lt;div&gt;There's also the possibility of moving elements around in the same container, changing their position&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class='container' id="container-third" dragula='"first-bag"'&gt;
        &lt;div&gt;This is the default use case. You only need to specify the containers you want to use&lt;/div&gt;
        &lt;div&gt;More interactive use cases lie ahead&lt;/div&gt;
        &lt;div&gt;Make sure to check out the &lt;a href='https://github.com/bevacqua/dragula#readme'&gt;documentation on GitHub!&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
&lt;/div&gt;</code></pre>
</div>
</div>
</p>