Interfaccia utente angolare mobile: trascina e rilascia

La funzione di trascinamento della selezione consente di assumere il controllo di un elemento html afferrandolo e trascinandolo e posizionandolo in una posizione diversa.

Per lavorare con le funzionalità di trascinamento della selezione nell'interfaccia utente di Mobile Angular, è necessario aggiungere il modulo dei gesti.

Per prima cosa aggiungi il file JavaScript all'interno di index.html come mostrato di seguito -

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

Successivamente aggiungi il modulo gesti come dipendenza in app.js come mostrato di seguito -

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

Dobbiamo creare una direttiva personalizzata per trascinare l'elemento, utilizzando il modulo $ drag.

La sintassi per utilizzare il modulo $ drag è la seguente:

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

Parametri

element - L'elemento html che vuoi trascinare.

dragOptions - È un oggetto con i seguenti dettagli -

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

Per la trasformazione , puoi utilizzare le seguenti opzioni:

$ drag.NULL_TRANSFORM - nessun movimento di trasformazione per l'elemento.

$ drag.TRANSLATE_BOTH - L'elemento si sposterà su entrambi gli assi x e y.

$ drag.TRANSLATE_HORIZONTAL - L'elemento si sposterà sull'asse x.

$ drag.TRANSLATE_UP - L'elemento si sposterà sull'asse y negativo.

$ drag.TRANSLATE_DOWN - L'elemento si sposterà su un asse y positivo.

$ drag.TRANSLATE_LEFT - L'elemento si sposterà sull'asse x negativo.

$ drag.TRANSLATE_RIGHT - L'elemento si sposterà sull'asse x positivo.

$ drag.TRANSLATE_VERTICAL - L'elemento si sposterà sull'asse y.

$ drag.TRANSLATE_INSIDE - Utilizza una funzione come mostrato di seguito -

{
   transform: $drag.TRANSLATE_INSIDE(myElement)
}

L'inizio, la fine, lo spostamento, l'annullamento è una funzione con draginfo e dettagli dell'evento come parametri.

draginfo- È una versione estesa del modulo $ touch. Ha i seguenti dettagli:

originalTransform- L' oggetto $ transform relativo alla trasformazione CSS prima del binding di $ drag.

originalRect - Il limite del client Rect per l'elemento associato prima di qualsiasi azione di trascinamento.

startRect - Il limite del client Rect per l'elemento associato registrato all'evento di inizio.

startTransform- La trasformazione $ all'avvio dell'evento.

rect - L'attuale Bounding Client Rect per l'elemento associato.

transform- L'attuale $ transform.

reset - Una funzione che ripristina l'elemento in originalTransform.

undo - Una funzione che ripristina l'elemento per startTransform.

touchOptions - è un oggetto opzione da passare al servizio $ touch sottostante.

Crea una direttiva usando $ drag module all'interno di src / js / app.js come mostrato di seguito -

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

Vediamo un esempio funzionante del trascinamento di un elemento:

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.";
});

L'elemento di trascinamento viene aggiunto all'interno di 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>

Un'immagine viene utilizzata per trascinare come mostrato di seguito:

La visualizzazione nel browser è la seguente:

Puoi trascinare l'immagine nell'interfaccia utente e una volta rilasciato il mouse, verrà ripristinata alla posizione originale poiché abbiamo utilizzato drag.reset () all'interno della funzione end .

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