Giao diện người dùng di động Angular - Kéo và thả

Tính năng kéo và thả cho phép bạn kiểm soát một phần tử html bằng cách lấy nó và kéo và đặt phần tử đó đến một vị trí khác.

Để làm việc với các tính năng kéo và thả trong Mobile Angular UI, bạn cần thêm mô-đun cử chỉ.

Đầu tiên hãy thêm tệp JavaScript vào bên trong index.html như được hiển thị bên dưới -

<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js"></script>

Sau đó, thêm mô-đun cử chỉ làm phụ thuộc trong app.js như hình dưới đây -

var app=angular.module('myFirstApp', [
   'ngRoute',
   'mobile-angular-ui',
   'mobile-angular-ui.gestures'
]);

Chúng ta cần tạo một chỉ thị tùy chỉnh để kéo mục, sử dụng mô-đun $ drag.

Cú pháp để sử dụng mô-đun kéo $ như sau:

$drag.bind(element, dragOptions, touchOptions);

Thông số

element - Phần tử html bạn muốn kéo.

dragOptions - Đó là một đối tượng có các chi tiết sau -

var dragOptions= {
   transform: $drag.TRANSLATE_BOTH,
   start: function(dragInfo, event){},
   end: function(dragInfo, event){},
   move: function(dragInfo, event){},
   cancel: function(dragInfo, event){}
};

Để chuyển đổi , bạn có thể sử dụng các tùy chọn sau:

$ drag.NULL_TRANSFORM - không có chuyển động biến đổi cho phần tử.

$ drag.TRANSLATE_BOTH - Phần tử sẽ di chuyển trên cả trục x và y.

$ drag.TRANSLATE_HORIZONTAL - Phần tử sẽ di chuyển trên trục x.

$ drag.TRANSLATE_UP - Phần tử sẽ di chuyển trên trục âm y.

$ drag.TRANSLATE_DOWN - Phần tử sẽ di chuyển trên trục y dương.

$ drag.TRANSLATE_LEFT - Phần tử sẽ di chuyển trên trục x âm.

$ drag.TRANSLATE_RIGHT - Phần tử sẽ di chuyển trên trục x dương.

$ drag.TRANSLATE_VERTICAL - Phần tử sẽ di chuyển trên trục y.

$ drag.TRANSLATE_INSIDE - Nó sử dụng một chức năng như hình dưới đây -

{
   transform: $drag.TRANSLATE_INSIDE(myElement)
}

Bắt đầu, kết thúc, di chuyển, hủy bỏ là một hàm với draginfo và chi tiết sự kiện dưới dạng tham số.

draginfo- Đây là phiên bản mở rộng của mô-đun $ touch. Nó có các chi tiết sau -

originalTransform- Đối tượng $ biến đổi liên quan đến biến đổi CSS trước khi $ drag bị ràng buộc.

originalRect - Biểu tượng Khách hàng Giới hạn cho phần tử bị ràng buộc trước bất kỳ hành động kéo nào.

startRect - Biểu thức khách hàng ràng buộc cho phần tử ràng buộc được đăng ký tại sự kiện bắt đầu.

startTransform- Biến đổi $ khi bắt đầu sự kiện.

rect - Biểu tượng khách hàng giới hạn hiện tại cho phần tử liên kết.

transform- Biến đổi $ hiện tại .

reset - Một phần tử khôi phục chức năng thành originalTransform.

undo - Một phần tử khôi phục chức năng để startTransform.

touchOptions - là một đối tượng tùy chọn được chuyển tới dịch vụ $ touch bên dưới.

Tạo một chỉ thị bằng cách sử dụng $ drag module bên trong src / js / app.js như hình dưới đây -

app.directive('dragItem', ['$drag', function($drag) {
   return {
      controller: function($scope, $element) {
         $drag.bind($element,
            {
               transform: $drag.TRANSLATE_BOTH,
               end: function(drag) {
                  drag.reset();
               }
            },
            {
               sensitiveArea: $element.parent()
            }
         );
      }
   };
}]);

Hãy để chúng tôi xem một ví dụ hoạt động của việc kéo một phần tử -

Index.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Mobile Angular UI Demo</title>
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
      <meta name="apple-mobile-web-app-status-bar-style" content="yes" />
      <link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
      <link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
      <link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
      <link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" />
      <script src="node_modules/angular/angular.min.js"></script>
      <script src="node_modules/angular-route/angular-route.min.js"></script>
      <script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
      <script src="node_modules/angular-route/angular-route.min.js"></script>
      <script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js"></script>
      <link rel="stylesheet" href="src/css/app.css" />
      <script src="src/js/app.js"></script>
   </head>
   <body ng-app="myFirstApp" ng-controller="MainController">
      
      <!-- Sidebars -->
      <div class="sidebar sidebar-left">
         <div class="scrollable">
            <h1 class="scrollable-header app-name">Tutorials</h1>
            <div class="scrollable-content">
               <div class="list-group" ui-turn-off='uiSidebarLeft'>
                  <a class="list-group-item" href="/">Home Page </a>
                     <a class="list-group-item" href="#/academic"><i class="fa fa-caret-right"></i>Academic Tutorials </a>
                     <a class="list-group-item" href="#/bigdata"><i class="fa fa-caret-right"></i>Big Data & Analytics </a>
                     <a class="list-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
                     <a class="list-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
                     <a class="list-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a>
                     <a class="list-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
                  </div>
               </div>
            </div>
         </div>
         <div class="sidebar sidebar-right">
            <div class="scrollable">
               <h1 class="scrollable-header app-name">eBooks</h1>
               <div class="scrollable-content">
                  <div class="list-group" ui-toggle="uiSidebarRight">
                     <a class="list-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a>
                     <a class="list-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
                  </div>
               </div>
            </div>
      </div>
      <div class="app">
         <div class="navbar navbar-app navbar-absolute-top">
            <div class="navbar-brand navbar-brand-center" ui-yield-to="title">
               TutorialsPoint
            </div>
            <div class="btn-group pull-left">
               <div ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle">
                  <i class="fa fa-th-large "></i> Tutorials
               </div>
            </div>
            <div class="btn-group pull-right" ui-yield-to="navbarAction">
               <div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle">
                  <i class="fal fa-search"></i> eBooks
               </div>
            </div>
         </div>
         <div class="navbar navbar-app navbar-absolute-bottom">
            <div class="btn-group justified">
               <a ui-turn-on="aboutus_modal" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
               <a ui-turn-on="contactus_overlay" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
            </div>
         </div>

         <!-- App body -->
         <div class='app-body'>
            <div class='app-content'>
               <ng-view></ng-view>
            </div>
         </div>
      </div><!-- ~ .app -->
      <!-- Modals and Overlays -->
      <div ui-yield-to="modals"></div>
   </body>
</html>

src / js / app.js

/* eslint no-alert: 0 */

'use strict';
//
// Here is how to define your module
// has dependent on mobile-angular-ui
//
var app=angular.module('myFirstApp', [
   'ngRoute',
   'mobile-angular-ui',
   'mobile-angular-ui.gestures'
]);
app.config(function($routeProvider, $locationProvider) {
   $routeProvider
   .when("/", {
      templateUrl : "src/home/home.html"
   });
   $locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.directive('dragItem', ['$drag', function($drag) {
   return {
      controller: function($scope, $element) {
         $drag.bind($element, 
            {
               transform: $drag.TRANSLATE_BOTH,end: function(drag) {
                  drag.reset();
               }
            },
            {
               sensitiveArea: $element.parent()
            }
         );
      }
   };
}]);
app.controller('MainController', function($rootScope, $scope, $routeParams) {
   $scope.msg="Welcome to Tutorialspoint!"
   $scope.js="JavaScript is a lightweight, interpreted programming language. It is designed 
   for creating network-centric applications. It is 
   complimentary to and integrated with Java. 
   JavaScript is very easy to implement because it 
   is integrated with HTML. It is open and cross-platform.";
   $scope.angularjs="AngularJS is a very powerful 
   JavaScript Framework. It is used in Single Page 
   Application (SPA) projects. It extends HTML DOM 
   with additional attributes and makes it more 
   responsive to user actions. AngularJS is open 
   source, completely free, and used by thousands of 
   developers around the world. It is licensed under the Apache license version 2.0.";
   $scope.reactjs="React is a front-end library 
   developed by Facebook. It is used for handling 
   the view layer for web and mobile apps. ReactJS 
   allows us to create reusable UI components. It is 
   currently one of the most popular JavaScript 
   libraries and has a strong foundation and large community behind it.";
});

Phần tử kéo được thêm vào bên trong src / home / home.html -

<div style="height: 100%; width: 100%; padding: 40px;">
   <div style="height: 100%; width: 100%; border: 1px solid #444; position: relative;">
      <div drag-Item>
         <img src="src/img/test.png" width="100" height="100" />
      </div>
   </div>
</div>

Một hình ảnh được sử dụng để kéo như hình dưới đây -

Màn hình hiển thị trong trình duyệt như sau:

Bạn có thể kéo hình ảnh trong giao diện người dùng và sau khi thả chuột, nó sẽ đặt lại về vị trí ban đầu như chúng ta đã sử dụng drag.reset () bên trong hàm end .

$drag.bind($element, {
      transform: $drag.TRANSLATE_BOTH,
      end: function(drag) {
         drag.reset();
      }
   },
   {
      sensitiveArea: $element.parent()
   }
);