Hey I am using DragulaJS-Angular Version inorder to get the effect of drag&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.
Explanation regrading my code and my goal:
I have 3 divs, container-one , container-two & container-third.
My main goals are:
1.Pass items only from container-one & container two to container-third.
2.Items are not allowed to be transfer between container-one and container-two.
3.Also I would like to add class to every item which transfer from container-one || container two to container-third.
- Also I would like to have the ability to clean the bags and reset the system.
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:
var app = angular.module("app",[angularDragula(angular)]);
app.controller('MainCtrl', function($scope, dragulaService) {
dragulaService.options($scope, 'first-bag', {
copy: true
});
});.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);
}<script src="https://rawgit.com/bevacqua/angular-dragula/master/dist/angular-dragula.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MainCtrl">
<div class='wrapper'>
<div class='container' id="container-one" dragula='"first-bag"'>
<div>You can move these elements between these two containers</div>
<div>Moving them anywhere else isn't quite possible</div>
<div>There's also the possibility of moving elements around in the same container, changing their position</div>
</div>
<div class='container' id="container-two" dragula='"first-bag"'>
<div>You can move these elements between these two containers</div>
<div>Moving them anywhere else isn't quite possible</div>
<div>There's also the possibility of moving elements around in the same container, changing their position</div>
</div>
<div class='container' id="container-third" dragula='"first-bag"'>
<div>This is the default use case. You only need to specify the containers you want to use</div>
<div>More interactive use cases lie ahead</div>
<div>Make sure to check out the <a href='https://github.com/bevacqua/dragula#readme'>documentation on GitHub!</a></div>
</div>
</div>
</div>
