移动 Angular UI - 拖放

拖放功能允许您通过抓取 html 元素并将其拖放到不同位置来控制该元素。

要在 Mobile Angular UI 中使用拖放功能，您需要添加手势模块。

首先在index.html中添加JavaScript文件，如下所示 -

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

稍后将手势模块添加为 app.js 中的依赖项，如下所示 -

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

我们需要使用 $drag 模块创建一个自定义指令来拖动项目。

使用 $drag 模块的语法如下 -

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

参数

element - 要拖动的 html 元素。

DragOptions - 它是一个具有以下详细信息的对象 -

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

对于转换，您可以使用以下选项 -

$drag.NULL_TRANSFORM - 元素没有变换移动。

$drag.TRANSLATE_BOTH - 元素将在 x 和 y 轴上移动。

$drag.TRANSLATE_HORIZONTAL - 元素将在 x 轴上移动。

$drag.TRANSLATE_UP - 元素将在负 y 轴上移动。

$drag.TRANSLATE_DOWN - 元素将在正 y 轴上移动。

$drag.TRANSLATE_LEFT - 元素将在负 x 轴上移动。

$drag.TRANSLATE_RIGHT - 元素将在正 x 轴上移动。

$drag.TRANSLATE_VERTICAL - 元素将在 y 轴上移动。

$drag.TRANSLATE_INSIDE - 它使用如下所示的函数 -

{
   transform: $drag.TRANSLATE_INSIDE(myElement)
}

开始、结束、移动、取消是一个以Draginfo和事件详细信息作为参数的函数。

Draginfo - 它是 $touch 模块的扩展版本。它有以下详细信息 -

originTransform -绑定$ drag之前相对于 CSS 变换的$ transform 对象。

原始矩形- 任何拖动操作之前绑定元素的边界客户端矩形。

startRect - 在启动事件时注册的绑定元素的边界客户端矩形。

startTransform -开始事件时的$转换。

rect - 绑定元素的当前边界客户端矩形。

变换- 当前的$变换。

reset - 将元素恢复为originalTransform的函数。

undo - 将元素恢复到 startTransform 的函数。

touchOptions - 是要传递给底层 $touch 服务的选项对象。

使用src/js/app.js 中的$ Drag 模块创建一个指令，如下所示 -

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

让我们看一个拖动元素的工作示例 -

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

拖动元素添加到 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>

图像用于拖动，如下所示 -

拖

浏览器中的显示如下 -

降低

您可以在 UI 中拖动图像，一旦释放鼠标，它将重置回原始位置，因为我们在end 函数中使用了Drag.reset()。

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