Mobile Angular UI - przeciągnij i upuść

Funkcja „przeciągnij i upuść” pozwala przejąć kontrolę nad elementem html, chwytając go i przeciągając i umieszczając element w innym miejscu.

Aby pracować z funkcjami przeciągnij i upuść w Mobile Angular UI, musisz dodać moduł gestów.

Najpierw dodaj plik JavaScript do pliku index.html, jak pokazano poniżej -

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

Później dodaj moduł gestów jako zależność w app.js, jak pokazano poniżej -

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

Musimy utworzyć niestandardową dyrektywę, aby przeciągnąć element, używając modułu $ drag.

Składnia użycia modułu $ drag jest następująca -

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

Parametry

element - element html, który chcesz przeciągnąć.

dragOptions - Jest to obiekt z następującymi szczegółami -

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

Aby przekształcić , możesz skorzystać z następujących opcji -

$ drag.NULL_TRANSFORM - brak ruchu transformacji dla elementu.

$ drag.TRANSLATE_BOTH - Element przesunie się zarówno na osi x, jak i y.

$ drag.TRANSLATE_HORIZONTAL - Element przesunie się na osi x.

$ drag.TRANSLATE_UP - Element przesunie się na ujemnej osi y.

$ drag.TRANSLATE_DOWN - Element będzie poruszał się po dodatniej osi y.

$ drag.TRANSLATE_LEFT - Element przesunie się na ujemnej osi x.

$ drag.TRANSLATE_RIGHT - element przesunie się na dodatniej osi x.

$ drag.TRANSLATE_VERTICAL - Element przesunie się na osi y.

$ drag.TRANSLATE_INSIDE - Wykorzystuje funkcję, jak pokazano poniżej -

{
   transform: $drag.TRANSLATE_INSIDE(myElement)
}

Start, end, move, cancel to funkcja z draginfo i szczegółami zdarzenia jako parametrami.

draginfo- Jest to rozszerzona wersja modułu dotykowego $. Zawiera następujące szczegóły -

originalTransform- Obiekt $ transform w stosunku do transformacji CSS przed powiązaniem $ drag.

originalRect - Bounding Client Rect dla elementu związanego przed jakąkolwiek operacją przeciągania.

startRect - Rect klienta ograniczającego dla powiązanego elementu zarejestrowanego w zdarzeniu początkowym.

startTransform- $ transform na początku zdarzenia.

rect - Bieżący Bounding Client Rect dla powiązanego elementu.

transform- Bieżąca transformacja $ .

reset - Funkcja przywracająca element do originalTransform.

undo - Funkcja przywracająca element do startTransform.

touchOptions - jest obiektem opcji przekazywanym do podstawowej usługi $ touch.

Utwórz dyrektywę za pomocą modułu $ drag w src / js / app.js, jak pokazano poniżej -

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

Zobaczmy działający przykład przeciągania elementu -

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

Element przeciągania jest dodawany w 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>

Obraz jest używany do przeciągania, jak pokazano poniżej -

Wygląd w przeglądarce wygląda następująco -

Możesz przeciągnąć obraz w interfejsie użytkownika, a po zwolnieniu myszy zostanie on zresetowany do pierwotnej pozycji, tak jak użyliśmy drag.reset () w funkcji end .

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