Interface utilisateur mobile angulaire - Glisser-déposer
La fonction glisser-déposer vous permet de prendre le contrôle d'un élément html en le saisissant et en le faisant glisser et en le plaçant à un emplacement différent.
Pour utiliser les fonctionnalités de glisser-déposer dans Mobile Angular UI, vous devez ajouter le module gestes.
Ajoutez d'abord le fichier JavaScript dans index.html comme indiqué ci-dessous -
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js"></script>Plus tard, ajoutez le module gestes en tant que dépendance dans app.js comme indiqué ci-dessous -
var app=angular.module('myFirstApp', [
'ngRoute',
'mobile-angular-ui',
'mobile-angular-ui.gestures'
]);Nous devons créer une directive personnalisée pour faire glisser l'élément, en utilisant le module $ drag.
La syntaxe pour utiliser le module $ drag est la suivante -
$drag.bind(element, dragOptions, touchOptions);Paramètres
element - L'élément html que vous souhaitez faire glisser.
dragOptions - C'est un objet avec les détails suivants -
var dragOptions= {
transform: $drag.TRANSLATE_BOTH,
start: function(dragInfo, event){},
end: function(dragInfo, event){},
move: function(dragInfo, event){},
cancel: function(dragInfo, event){}
};Pour la transformation , vous pouvez utiliser les options suivantes -
$ drag.NULL_TRANSFORM - aucun mouvement de transformation pour l'élément.
$ drag.TRANSLATE_BOTH - L'élément se déplacera sur les axes x et y.
$ drag.TRANSLATE_HORIZONTAL - L'élément se déplacera sur l'axe x.
$ drag.TRANSLATE_UP - L'élément se déplacera sur l'axe y négatif.
$ drag.TRANSLATE_DOWN - L'élément se déplacera sur un axe y positif.
$ drag.TRANSLATE_LEFT - L'élément se déplacera sur l'axe x négatif.
$ drag.TRANSLATE_RIGHT - L'élément se déplacera sur l'axe des x positif.
$ drag.TRANSLATE_VERTICAL - L'élément se déplacera sur l'axe y.
$ drag.TRANSLATE_INSIDE - Il utilise une fonction comme indiqué ci-dessous -
{
transform: $drag.TRANSLATE_INSIDE(myElement)
}Le début, la fin, le déplacement, l'annulation est une fonction avec des informations de glissement et des détails d'événement en tant que paramètres.
draginfo- C'est une version étendue du module $ touch. Il a les détails suivants -
originalTransform- L' objet $ transform relatif à la transformation CSS avant que $ drag ne soit lié.
originalRect - Le Rect de Client Bounding pour l'élément lié avant toute action de glissement.
startRect - Le Rect de client de délimitation pour l'élément lié enregistré lors de l'événement de démarrage.
startTransform- L' événement $ transform at start.
rect - Le rect client de délimitation actuel pour l'élément lié.
transform- La transformation $ actuelle .
reset - Une fonction de restauration de l'élément à originalTransform.
undo - Un élément de restauration de fonction pour startTransform.
touchOptions - est un objet option à passer au service $ touch sous-jacent.
Créez une directive en utilisant le module $ drag dans src / js / app.js comme indiqué ci-dessous -
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()
}
);
}
};
}]);Voyons un exemple de travail de glisser un élément -
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'élément drag est ajouté dans 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>Une image est utilisée pour faire glisser comme indiqué ci-dessous -
L'affichage dans le navigateur est le suivant -
Vous pouvez faire glisser l'image dans l'interface utilisateur et une fois que la souris est relâchée, elle reviendra à sa position d'origine, car nous avons utilisé drag.reset () dans la fonction de fin .
$drag.bind($element, {
transform: $drag.TRANSLATE_BOTH,
end: function(drag) {
drag.reset();
}
},
{
sensitiveArea: $element.parent()
}
);