AngularJS Drag & Drop with HTML5

Introduction

Chắc hẳn chúng ta cũng không ai xa lạ gì khi nghe đến Angular nữa, nó là 1 framework rất nổi tiếng củaJavaScripts với nhiều ưu điểm như: được phát triển bởi Google và là mã nguồn mở viết theo mô hình MVC, cơ chế data-binding 2 chiều, cho phép xây dựng ngay trong trình duyệt giúp code sạch và gọn... và rất nhiều ưu điểm khác. Nếu quan tâm các bạn có thể tìm hiểu thêm, hiện nay có rất nhiều bài viết từ nhiều nguồn khác nhau viết rất chi tiết về framework khá phổ biến này. Nay mình sẽ giới thiệu về 1 directive khá hay của AngularJS, đó là dnd-draggable. Nói nôm na thì dnd-draggable là 1 Angular directive cho phép chúng ta modify 1 list nào đó kết hợp với tính năng drag and drop API của HTML5.

Download & Installation

Việc đầu tiên chúng ta cần làm sau khi đã cài AngularJS vào hệ thống, đó là add thêm thư viện angular-drag-and-drop-lists.js tại đây, sau đó tiến hành include nó vào trong app của bạn:

//= require lib/angular-drag-and-drop-lists

sau đó chúng ta sẽ add thêm module dndLists vào trong angular app, giả sử ta sẽ có myApp như sau:

(function() {
  angular.module('myApp', ['ui.bootstrap', 'ui.bootstrap.datetimepicker', 'datetimePickerLib', 'dndLists'])
    .config(['$httpProvider', '$locationProvider', defaultConfig]);
})();

Vậy là xong phần download và cài đặt. Tiếp theo chúng ta sẽ xem cách dùng nó như thế nào.

How to use

Ta sẽ xây dựng Angular controller có tên demoDragAndDropList với 2 lists cơ bản như sau:

'user strict;'

angular.module('managerApp').controller('demoDragAndDropListController', demoDragAndDropListController);
function demoDragAndDropListController() {
  var vm = this;
  var originalList = [{name: "A1"}, {name: "A2"}, {name: "A3"}, {name: "A4"}];
  var dragList = [{name: "B1"}, {name: "B2"}, {name: "B3"}, {name: "B4"}];
  vm.fields = {
    selected: null,
    lists: {originalList, dragList}
  };
}

Chúng ta cũng có thể dùng $scope, tuy nhiên việc lạm dụng biến global đôi khi khiến chúng ta gặp khó khăn trong quá trình maintain, chi tiết các bạn có thể tham khảo thêm về $scope trong AngularJS. Vì thế ở đây mình sẽ dùng vm. Sau đó là phía bên View:

<div class="simpleDemo" ng-controller="demoDragAndDropListController as vm">
  <div class="col-md-12">
    <ul dnd-list="vm.fields.lists.originalList" class="col-md-4">
      <li ng-repeat="item in vm.fields.lists.originalList" dnd-draggable="item" dnd-moved="vm.fields.lists.originalList.splice($index, 1)"
        dnd-effect-allowed="move" dnd-selected="vm.fields.selected = item" ng-class="{'selected': vm.fields.selected === item}">
        {{item.name}}
      </li>
    </ul>

    <ul dnd-list="vm.fields.lists.dragList" class="col-md-4">
      <li ng-repeat="item in vm.fields.lists.dragList" dnd-draggable="item" dnd-moved="vm.fields.lists.dragList.splice($index, 1)"
        dnd-effect-allowed="move" dnd-selected="vm.fields.selected = item" ng-class="{'selected': vm.fields.selected === item}">
        {{item.name}}
      </li>
    </ul>
  </div>
</div>

Sau đó là 1 chút css cho đẹp nếu muốn