Mobile Angular UI - Drag and Drop-alljchome-开发者的教程家园

Mobile Angular UI Tutorial

Selected Reading

Mobile Angular UI - Drag and Drop

Drag and drop feature allows you to take control of a html element by grabbing it and dragging and placing the element to a different location.

To work with drag and drop features in Mobile Angular UI, you need to add the gestures module.

First add the JavaScript file inside index.html as shown below −

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

Later add the gestures module as a dependency in app.js as shown below −

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

We need to create a custom directive to drag the item, using the $drag module.

The syntax to use $drag module is as follows −

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

Parameters

element − The html element you want to drag.

dragOptions − It is an object with the following details −

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

For transform, you can make use of following options −

$drag.NULL_TRANSFORM − no transform movement for the element.

$drag.TRANSLATE_BOTH − The element will move on both x and y axis.

$drag.TRANSLATE_HORIZONTAL − The element will move on x axis.

$drag.TRANSLATE_UP − The element will move on the negative y axis.

$drag.TRANSLATE_DOWN − The element will move on a positive y axis.

$drag.TRANSLATE_LEFT − The element will move on the negative x axis.

$drag.TRANSLATE_RIGHT − The element will move on the positive x axis.

$drag.TRANSLATE_VERTICAL − The element will move on y axis.

$drag.TRANSLATE_INSIDE − It makes use of a function as shown below −


{
   transform: $drag.TRANSLATE_INSIDE(myElement)
}

The start, end, move, cancel is a function with draginfo and event details as params.

draginfo − It is an extended version of $touch module. It has following details −

originalTransform − The $transform object relative to CSS transform before $drag is bound.

originalRect − The Bounding Cpent Rect for bound element before any drag action.

startRect − The Bounding Cpent Rect for bound element registered at start event.

startTransform − The $transform at start event.

rect − The current Bounding Cpent Rect for bound element.

transform − The current $transform.

reset − A function restoring element to originalTransform.

undo − A function restoring element to startTransform.

touchOptions − is an option object to be passed to underlying $touch service.

Create a directive using $drag module inside src/js/app.js as shown below −

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

Let us see a working example of dragging an element −

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" />
      <pnk rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
      <pnk rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
      <pnk rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
      <pnk 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>
      <pnk rel="stylesheet" href="src/css/app.css" />
      <script src="src/js/app.js"></script>
   </head>
   <body ng-app="myFirstApp" ng-controller="MainController">
      
      <!-- Sidebars -->
      <span class="sidebar sidebar-left">
         <span class="scrollable">
            <h1 class="scrollable-header app-name">Tutorials</h1>
            <span class="scrollable-content">
               <span class="pst-group" ui-turn-off= uiSidebarLeft >
                  <a class="pst-group-item" href="/">Home Page </a>
                     <a class="pst-group-item" href="#/academic"><i class="fa fa-caret-right"></i>Academic Tutorials </a>
                     <a class="pst-group-item" href="#/bigdata"><i class="fa fa-caret-right"></i>Big Data & Analytics </a>
                     <a class="pst-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
                     <a class="pst-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
                     <a class="pst-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a>
                     <a class="pst-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
                  </span>
               </span>
            </span>
         </span>
         <span class="sidebar sidebar-right">
            <span class="scrollable">
               <h1 class="scrollable-header app-name">eBooks</h1>
               <span class="scrollable-content">
                  <span class="pst-group" ui-toggle="uiSidebarRight">
                     <a class="pst-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a>
                     <a class="pst-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
                  </span>
               </span>
            </span>
      </span>
      <span class="app">
         <span class="navbar navbar-app navbar-absolute-top">
            <span class="navbar-brand navbar-brand-center" ui-yield-to="title">
               TutorialsPoint
            </span>
            <span class="btn-group pull-left">
               <span ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle">
                  <i class="fa fa-th-large "></i> Tutorials
               </span>
            </span>
            <span class="btn-group pull-right" ui-yield-to="navbarAction">
               <span ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle">
                  <i class="fal fa-search"></i> eBooks
               </span>
            </span>
         </span>
         <span class="navbar navbar-app navbar-absolute-bottom">
            <span 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>
            </span>
         </span>

         <!-- App body -->
         <span class= app-body >
            <span class= app-content >
               <ng-view></ng-view>
            </span>
         </span>
      </span><!-- ~ .app -->
      <!-- Modals and Overlays -->
      <span ui-yield-to="modals"></span>
   </body>
</html>

src/js/app.js


/* espnt 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 pghtweight, interpreted programming language. It is designed 
   for creating network-centric apppcations. It is 
   comppmentary 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 
   Apppcation (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 pcensed under the Apache pcense version 2.0.";
   $scope.reactjs="React is a front-end pbrary 
   developed by Facebook. It is used for handpng 
   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 
   pbraries and has a strong foundation and large community behind it.";
});

The drag element is added inside src/home/home.html −

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

An image is used to drag as shown below −

The display in the browser is as follows −

You can drag the image in the UI and once the mouse is released, it will reset back to the original position as we have used drag.reset()inside the end function.

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

Mobile Angular UI - Drag and Drop

Parameters

Index.html

src/js/app.js

友情链接