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
      });
    }
  ]);