About
Angular is a JavaScript framework. It is a library written in JavaScript
-
Angular extends HTML attributes with Directives, e.g.
ng-app
, and binds data to HTML with Expressions, e.g.{ {name} }
Note: These examples using several Drag&Drop libraries as "angular-dragula.js"
Problem & Solution
Page Arrangement:
move
Action Efficiency:
copy
,remove
User Preferences
Implementation
Install
<!-- VENDER CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.css">
<!-- VENDOR SCRIPTS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-dragula/1.2.8/angular-dragula.min.js"></script>
HTML Setup
<div class="container" ng-app="dragula-module">
JS Setup
// Dragula Module Control var dgapp = angular.module('dragula-module', [angularDragula(angular)]);
How to use?
Example 1. Move
the box between these two containers.
BOX 1
BOX 2
BOX 4
BOX 3
BOX 5
HTML
<div class="wrapper" ng-controller="dragula-ctrl">
<div class="container ng-isolate-scope" dragula='"move-box"'>
<div>BOX 1</div>
<div>BOX 2</div>
<div>BOX 4</div>
</div>
<div class="container ng-isolate-scope" dragula='"move-box"'>
<div>BOX 3</div>
<div>BOX 5</div>
</div>
</div>
JS
// Move dgapp.controller('dragula-move-ctrl', ['$scope', 'dragulaService', function ($scope, dragulaService) { dragulaService.options($scope, 'move-box'); } ]);
Example 2. Remove
the box out of the container.
BOX 1
BOX 2
BOX 3
BOX 4
BOX 5
HTML
<div class="wrapper" ng-controller="dragula-remove-ctrl">
<div class="container ng-isolate-scope" dragula='"remove-box"'>
<div>BOX 1</div>
<div>BOX 2</div>
<div>BOX 3</div>
<div>BOX 4</div>
<div>BOX 5</div>
</div>
</div>
JS
// Remove dgapp.controller('dragula-remove-ctrl', ['$scope', 'dragulaService', function ($scope, dragulaService) { dragulaService.options($scope, 'remove-box', { removeOnSpill: true }); } ]);
Example 3. Copy
the box between these two containers.
BOX 1
BOX 2
BOX 4
BOX 3
BOX 5
HTML
<div class="wrapper" ng-controller="dragula-copy-ctrl">
<div class="container ng-isolate-scope" dragula='"copy-box"'>
<div>BOX 1</div>
<div>BOX 2</div>
<div>BOX 4</div>
</div>
<div class="container ng-isolate-scope" dragula='"copy-box"'>
<div>BOX 3</div>
<div>BOX 5</div>
</div>
</div>
JS
// Copy dgapp.controller('dragula-copy-ctrl', ['$scope', 'dragulaService', function ($scope, dragulaService) { dragulaService.options($scope, 'copy-box', { copy: true }); } ]);