Mobile Angular UI - ลากและวาง

คุณลักษณะการลากและวางช่วยให้คุณสามารถควบคุมองค์ประกอบ html ได้โดยการจับและลากและวางองค์ประกอบไปยังตำแหน่งอื่น

ในการทำงานกับคุณสมบัติการลากและวางใน Mobile Angular UI คุณต้องเพิ่มโมดูลท่าทางสัมผัส

ขั้นแรกให้เพิ่มไฟล์ JavaScript ภายใน index.html ดังที่แสดงด้านล่าง -

<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- เป็นโมดูล $ touch รุ่นขยาย มีรายละเอียดดังต่อไปนี้ -

originalTransform- วัตถุ$ transform ที่สัมพันธ์กับการแปลง CSS ก่อนที่$ drag จะถูกผูกไว้

originalRect - Bounding Client Rect สำหรับองค์ประกอบที่ถูกผูกไว้ก่อนการดำเนินการลากใด ๆ

startRect - Bounding Client Rect สำหรับองค์ประกอบที่ถูกผูกไว้ที่ลงทะเบียนในเหตุการณ์เริ่มต้น

startTransform- การแปลงค่า$เมื่อเริ่มต้น

rect - Bounding Client Rect ปัจจุบันสำหรับองค์ประกอบที่ถูกผูกไว้

transform- การแปลง$ปัจจุบัน

reset - ฟังก์ชั่นการคืนค่าองค์ประกอบเป็น originalTransform

undo - ฟังก์ชั่นการกู้คืนองค์ประกอบเพื่อ startTransform

touchOptions - เป็นอ็อบเจ็กต์ตัวเลือกที่จะส่งต่อไปยังบริการ $ touch พื้นฐาน

สร้างคำสั่งโดยใช้โมดูล$ drag ภายใน src / js / app.js ดังที่แสดงด้านล่าง -

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

ให้เราดูตัวอย่างการทำงานของการลากองค์ประกอบ -

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

องค์ประกอบการลากถูกเพิ่มเข้าไปใน 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 และเมื่อเมาส์ถูกปล่อยออกมาก็จะรีเซ็ตกลับไปยังตำแหน่งเดิมในขณะที่เราได้ใช้drag.reset ()ภายในฟังก์ชั่นที่สิ้นสุด

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