آموزش کشیدن و رها کردن در برنامه نویسی انگولار

erfan molaei
3 سال پیش
آموزش کشیدن و رها کردن در برنامه نویسی انگولار

آموزش کشیدن و رها کردن در برنامه نویسی انگولار

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش کشیدن و رها کردن در برنامه نویسی انگولار خواهیم پرداخت.

ویژگی کشیدن و رها کردن به شما امکان می دهد با در دست گرفتن عنصر html، عنصر را با کشیدن و قرار دادن آن در مکان دیگری کنترل کنید.

برای کار با ویژگی های کشیدن و رها کردن در رابط کاربر Angular Mobile، باید ماژول حرکات را اضافه کنید.

همانطور که در زیر نشان داده شده است ابتدا فایل 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$ – این عنصر در یک محور مثبت حرکت می کند.

drag.TRANSLATE_LEFT$ – عنصر در محور x منفی حرکت می کند.

drag.TRANSLATE_RIGHT$ – عنصر در محور x مثبت حرکت می کند.

drag.TRANSLATE_VERTICAL$ – عنصر در محور y حرکت خواهد کرد.

drag.TRANSLATE_INSIDE$ – از عملکردی استفاده می شود که در زیر نشان داده شده است –

{
   transform: $drag.TRANSLATE_INSIDE(myElement)
}

 

 

draginfo – این یک نسخه توسعه یافته از ماژول  touch$ است. این دارای جزئیات زیر است –

originalTransform – شی تبدیل $ نسبت به تبدیل CSS قبل از اینکه drag$ محدود شود.

originalRect – Bounding Client Rect برای عنصر مقید قبل از هرگونه عمل کشیدن.

startRect – Becting Client Rect برای عنصر مقید ثبت شده در رویداد start.

startTransform – رویداد تبدیل $ در شروع.

rect – Crediting Client Rect فعلی برای عنصر مقید.

تبدیل –  فعلی transform$

تنظیم مجدد – عنصر بازگرداندن عملکرد به originalTransform.

لغو – عنصر بازیابی عملکرد برای شروعTransform.

touchOptions – شی option گزینه ای است که باید به سرویس  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>

 

از تصویر برای کشیدن استفاده می شود همانطور که در زیر نشان داده شده است –

Drag
صفحه نمایش در مرورگر به شرح زیر است –

Drop
می توانید تصویر را در UI بکشید و هنگامی که ماوس آزاد شد ، دوباره به موقعیت اصلی باز می گردد همانطور که ما از ()drag.reset  در داخل jhfu پایان استفاده کرده ایم.

 

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

 

منبع.

 

لیست جلسات قبل آموزش برنامه نویسی انگولار 

  1. آموزش برنامه نویسی انگولار
  2. بررسی اجمالی برنامه نویسی انگولار
  3. آموزش نصب انگولار 
  4. آموزش راه اندازی پروژه در برنامه نویسی انگولار
  5. آموزش اولین برنامه انگولار
  6. آموزش طرح بندی در برنامه نویسی انگولار
  7. آموزش مولفه ها در برنامه نویسی انگولار
  8. آموزش منوی کشویی در برنامه نویسی انگولار
  9. آموزش منوی آکاردئون در برنامه نویسی انگولار
  10. آموزش تب ها در برنامه نویسی انگولار
0
0
برچسب ها :
نویسنده مطلب erfan molaei

دیدگاه شما

بدون دیدگاه