ちょっと私はDragulaJS-Angular Version を使用して、2 つのバケット間のドラッグ アンド ドロップの効果を得ています。このライブラリにはいくつかの問題があります。まず、同じバケットにのみ属するアイテムを移動できます。異なるバケットを定義すると、それらの間でアイテムを移動できません。
私のコードと私の目標を再評価する説明：
container-one 、 container-two 、および container- third の 3 つの div があります。
私の主な目標は次のとおりです。
1.コンテナ1とコンテナ2からコンテナ3にアイテムのみを渡します。
2.コンテナ1とコンテナ2の間でアイテムを移動することはできません。
3.また、container-one || から転送されるすべてのアイテムにクラスを追加したいと思います。コンテナ 2 からコンテナ 3 まで。
- また、バッグを掃除してシステムをリセットする機能が欲しいです。
5.袋から袋へ要素を渡すアニメーションを作りたいのですが、今のアニメーションでは足りません。コンテナの 1 つだけでなく、2 つのコンテナ間にもドラッグ要素を表示する必要があります。私のコード:
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>